relative positioning

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

relative positioning

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

In your example make the relatively positioned div appear before the text in the markup.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Not sure, but I think that what you need is this: http://www.stopdesign.com/articles/absolute/
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply