Question

I want to align my text according to the box in which the text is. Look at the following html code.

Html:
<div class="box">
    <div class="cont">
        Hello World!!!
    </div>
</div>

and now here is its css code

CSS:
.box
{
    height:200px;
    width:200px;
    border:1px dashed red;
}
.cont
{
    border:1px solid green;
    position:fixed;
    right:0px;
    width:55px;
}

But when i keep it fixed it just moves toward the right corner of the page while i want it to move to the corner of the box. Thanks in advance.

Answer 1

If you want content positioned according to a parent element, use position: absolute. To denote which parent element you want it positioned according to, give the parent a style of position:relative. Remove the position:fixed from cont and add the following, and it should work.

.box {
position: relative;
}

.cont {
position: absolute;
}