Page 1 of 1
relative positioning
Posted: Sat Aug 26, 2006 4:56 am
by s.dot
Say you have a div layer that is 50 px in height and it is nested inside of another div. You want to position this div relatively to its container 25 pixels to the top.
Code: Select all
<div>
<div style="height: 50px; position: relative; top: -25px;">stuff</div>
</div>
Instead of the actual div layer moving up 25 px (it's contents do), the actual div block is now 75px in height, as it leaves that space of 25px instead of moving the entire block up.
Is there any way to avoid this?
[edit] Here's a
real example. No matter how long or short the page is there's always a 240 px space at the bottom of my text, because the div that contains the text is postioned relatively -240px.
Posted: Sat Aug 26, 2006 5:40 am
by Ollie Saunders
In your example make the relatively positioned div appear before the text in the markup.
Posted: Sat Aug 26, 2006 6:10 am
by matthijs
The div isn't 75px high. Give the div a red background (or use the webdevtoolbar) to see what happens when you use the relative positioning.
If you would use: margin-top:-25px; you would get the same effect.
So to answer your question (if I understand you correctly, excuse me if not): no, you can't avoid this, as that's how the technque is supposed to work.
Posted: Sat Aug 26, 2006 6:34 am
by Ollie Saunders
matthijs wrote:The div isn't 75px high.
We can only assume it is because we have nothing to say otherwise:
Scottay wrote:Here's a real example.
Posted: Sat Aug 26, 2006 6:52 am
by Oren
Not sure, but I think that what you need is this:
http://www.stopdesign.com/articles/absolute/
Posted: Sat Aug 26, 2006 7:03 am
by matthijs
ole wrote:We can only assume it is because we have nothing to say otherwise:
?
I'm not sure I understand what you mean with this. The div is not 75px because of style="height: 50px;".
We must know what effect scottayy is after. Using absolute positioning is another tool. Using absolute positioning will take the div out of the document flow, while relative positioning keeps the div in the flow but positions itself relative to its starting point.
In absolute positioning, the div is positioned relative to it's positioned parent div (the article on stopdesign is a good explanation of the concept).
When you would give the parent element a relative position and the div an absolute position of top -25px you would have the same effect but then you would have to take care the div doesn't start to overlap with the content in the parent div.