CSS Position Relative

Question

Hi!

I am trying to position some text relative to the prior element. So i have 4 boxes and 1 container, the first and second element works, but then the problem starts. It is supposed to be 2 rows with 2 boxes on each row.

Box1 | Box2 Box3 | Box4

But the Box3 isn't showing as it is supposed to.

http://homeweb.mah.se/~M09K0291/test.htm

In Chrome i get the text from Box 3 below the actual box and in IE the third box is behind the fourth box.

Any ideas?

Answer 1

div.c {
clear:left;
position:relative;
top:-100px;
}

div.d { top:-200px; }

Answer 2

Since you're defining explicit height and width for the boxes anyways, it's probably more clear and robust to just use absolute positioning with position: relative set on .page1.

For example:

 .page1 { position: relative; }
 .a, .b, .c, .d { position: absolute; }
 .a { top: 0; left: 0; }
 .b { top: 0; left: 100px; }
 .c { top: 100px; left: 0; }
 .d { top: 100px; left: 100px;}

See: http://jquery.nodnod.net/cases/597

EDIT:

If you don't want to use absolute positioning, or want to avoid top and left, you can also use floats and clears:

.a, .b, .c, .d { float: left; }
.a, .c { clear: left; }

You'll also need to apply float clearing for .page1 via something like clearfix.

See: http://jquery.nodnod.net/cases/598

Answer 3

Position relative positions the element relative to where it would normally be. The element is not taken out of the flow of the document so if you move one it will affect the positioning of the elements after it.

Position absolute positions the element relative to the containing block. The elements are taken out of the flow of the document so moving one does not affect anything else on the page.

Example using relative positoning

If you are using position relative, elements are moved with top and left.

div.fyrkant
{
    height: 100px;
    width: 100px;
    position:relative;
}
div.a
{
    background-color: #b5e274;
}
div.b
{
    background-color: #e2d974;
    left: 100px;
    top:-100px;
}
div.c
{
    background-color: #e2b074;
    top: -100px;
}
div.d
{
    background-color: #e27e74;
    top: -200px;
    left: 100px;
}

If you don't want use top and left, you should investigate using floats and clears for this problem.

Example using floats

The best cross-browser solution is going to involve adding markup to your html. Since what you want is two rows of blocks, surround each row with a div.

<div class="page1">
    <div class="row">
     <div class="a fyrkant">test a
     </div>
     <div class="b fyrkant">test b
     </div>
    </div>
    <div class="row">
     <div class="c fyrkant">test c
     </div>
     <div class="d fyrkant">test d
     </div>
    </div>
</div>

Then add to your css

div.fyrkant
{
    height: 100px;
    width: 100px;
}
.row {overflow:hidden;zoom:1;}
.a, .b, .c, .d { float: left; }

The overflow:hidden clears the floats so the .row contains the blocks. If you do not have that the rows have no height and the rows will be on the same line. The overflow:hidden does not work in ie6 but zoom:1 will (invokes haslayout)