position:relative

[Jan Clemens Faerber]

What is the difference between

<div style="position:absolute; top:20px; left:20px;>hi</div>

and

<div style="position:relative; top:20px; left:20px;>hi</div>?

 

[Els]

What is the difference between

<div style="position:absolute; top:20px; left:20px;>hi</div>

and

<div style="position:relative; top:20px; left:20px;>hi</div>?

position:absolute is in relation to the positioned parent
element, which might be for instance the body, or a container
div with position:relative, while position:relative is in
relation to the normal place of the element itself.

 

[Steve Pugh]

What is the difference between

<div style="position:absolute; top:20px; left:20px;>hi</div>

This positions the element 20px down and 20px from the left of it's
"containing block" (not the same thing as it's parent element, see the
CSS spec). It also removes the element from the normal document flow.

<div style="position:relative; top:20px; left:20px;>hi</div>?

This positions the element 20px down and 20px from the left of it's
default position. It does not remove the element from the normal
document flow.

Try the above with paragaphs of text before and after the div and
you'll see the difference quite easily.

Steve

 

[Els]

Steve Pugh wrote:

[...]

"containing block" (not the same thing as it's
parent element, see the CSS spec).

I stand corrected.
<quote>
If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' of
'absolute', 'relative' or 'fixed',
</quote>
Which is what I meant, but then more detail is explained, which
I wasn't aware of.
http://www.w3.org/TR/CSS21/visudet.html#x0

 

[Jan Clemens Faerber]

Try the above with paragaphs of text before and after the div and
you'll see the difference quite easily.

I did so now - I can see only one <div> section - why that?

 

[Jan Clemens Faerber]

position:absolute is in relation to the positioned parent
element, which might be for instance the body,

Is the element body always the whole area you can see in a browser
without borders?

or a container

div with position:relative, while position:relative is in
relation to the normal place of the element itself.

But don´t they have the same position or is absolute overwriting
something?

Thanks anyway!

 

[Els]

Not exactly right, as by Steve's post.

Is the element body always the whole area you can see in a
browser without borders?

No, you can give the body a height of 50%, which means the
bottom half of your window will not be showing the body

But don't they have the same position or is absolute
overwriting something?

Absolute is not overwriting anything, but it's placed out of
the normal flow of the elements.

Like you take it out, and the other elements will fill up it's
place, and then you put it where you want using
position:absolute, but the other elements will not move
anymore - they don't "see" the absolute positioned element.

 

[Leif K-Brooks]

What is the difference between

<div style="position:absolute; top:20px; left:20px;>hi</div>

and

<div style="position:relative; top:20px; left:20px;>hi</div>?

The first positions the div 20px from the top and left of its containing
block. The second positions 20px left of and below where it would have
been without the setting.

 

[Jan Clemens Faerber]

No, you can give the body a height of 50%, which means the
bottom half of your window will not be showing the body


Absolute is not overwriting anything, but it's placed out of
the normal flow of the elements.

Like you take it out, and the other elements will fill up it's
place, and then you put it where you want using
position:absolute, but the other elements will not move
anymore - they don't "see" the absolute positioned element.

Thanks Els!

 

[Steve Pugh]

I did so now - I can see only one <div> section - why that?

Probably due to the missing " at the end of both style attributes.

I meant that if you try something like this:

<p>Sed mollis, est in blandit tempus, diam dui posuere ante, vel
faucibus pede felis at arcu. Nulla dapibus pretium massa. Nulla
pulvinar ante in ipsum.</p>
<div style="position:absolute; top:20px; left:20px;">hi</div>
<p>Sed mollis, est in blandit tempus, diam dui posuere ante, vel
faucibus pede felis at arcu. Nulla dapibus pretium massa. Nulla
pulvinar ante in ipsum.</p>
<div style="position:relative; top:20px; left:20px;">hi</div>
<p>Sed mollis, est in blandit tempus, diam dui posuere ante, vel
faucibus pede felis at arcu. Nulla dapibus pretium massa. Nulla
pulvinar ante in ipsum.</p>

You'll see the first div is placed over the first paragraph and no
space is left between the first and second paragraphs (except normal
margins). The second div is moved down and to the left of its normal
position but the space associated with its normal position is still
present.

Steve

 

[Jan Clemens Faerber]

Probably due to the missing " at the end of both style attributes.

You were right!
I am getting an idea of cascading them.

TY