<DIV> layer "relative" position

Hi,
I cannot figure out how to set the position of a <DIV> "relative" to that of another object etc...

for instance... If i wanted to "float" the position of a <DIV> based on the Top+Height of another <DIV> etc...

e.g. - defined in My.CSS like;
   #mainbody   { position: absolute; z-index: 9; top: 184px; left: 220px; visibility: visible }
LVL 1
BrianBaleyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZontarCommented:
If you use position:relative instead of position:absolute, then the position will be determine by the first parent of the element which is absolutely positioned. In fact, absolute positioning is really just a shortcut for saying "relative to the body element".

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
body  { background-color:#777; }

div#outer  { position:absolute; left:150px; top:150px; width:200px; height:200px; background-color:#F00;  }

div#inner1  { position:relative; left:50px; top:50px; width:100px; height:100px; background-color:#00F;  }

div#inner2  { position:relative; left:-100px; top:-200px; width:100px; height:100px; background-color:#0F0;  }
</style>

</head>
<body>
<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>
</body>
</html>

Here, the outer div is at (150, 150) and the inner1 div is at (50, 50) relative to the outer div, or (200,200) relative to the page.

You can use negative values as well. Copy and paste the code into a file, save it, and then view it in your browser and see what happens with the div "inner2".

In practice it is a bit more complicated than that, due to margins, padding, etc. of content in the divs, but that's the basic idea.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
You position one block relative to another with script at load time.
The Block to be position must have absolute positioning.  If the page is
slow loading the block is going to sit at teh top left of the page until
it is move into position, so you might want to set visibility to hidden
until the function exceutes and then set it to visible. The IEoffset is
only necessary if you are using a strict doctype.  The way "enhanced"
method Microsoft uses to calculate margins offsets the position by -15
pixels.  If the page is using a transitional doctype or none at all it
should position correctly without the offset.  Mozilla position correctly
for all doctypes.

Cd&


<!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd" -->
<html>
<head>
<title>none</title>
<script type="text/javascript">
<!--
   function setPos()
   {
      IEoffset=(!document.all)? 0 : 15;
      srcobj=document.getElementById('block1');
      desobj=document.getElementById('block2');
      T=srcobj.offsetTop+srcobj.offsetHeight+IEoffset;
      L=srcobj.offsetLeft+srcobj.offsetWidth-100;
      desobj.style.top=T+'px';
      desobj.style.left=L+'px';
   }
window.onload=setPos;
//-->
</script>
</head>
<body>
<div id="block1" style="background-color:blue;width:30%;">
Content and content and etc and etc
Content and content and etc and etc
Content and content and etc and etc
Content and content and etc and etc
Content and content and etc and etc
Content and content and etc and etc
Content and content and etc and etc
Content and content and etc and etc
</div>
<div id="block2" style="position:absolute;background-color:red">
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other stuff, and stuff
some other sytf, and stuff
some other sutff, and stuff
</div>
</body>
</html>


Zontar,

Your description of positioning is inaccurate.  Relative position
offsets the element from the postion it would be in if the
default static position was applied.  Absolute position applies an
absolute offset from the position within the immediate parent element,
which may or may not be the body; or more correctly the documentElement.
The element may render outside of the parent element, but the position
is still detemined by the relationship to the top, left and bottom of
parent element.

Cd&
ZontarCommented:
Then how is it that my example works as described?
COBOLdinosaurCommented:
It works because the absolute positioned element has the documentElement as its parent and offsets from the top-left of the page.  The two inner divs correct position relative to a static position in their parent; the outer div.  The relationship to the bady itself is merely because the parent of the outer div is the documentElement and your statement that absolute position is a shortcut for relative to the body is still incorrect.

And of course that kind of rigid approach using hard coded values for everthing is likely to be badly broken in a lot of browsers where user preferences are different than the those anticipated by the developer.

Position is the weakest and least useful of the CSS attributes, and I rarely use it because it limits cross-platform flexibility.

Cd&
COBOLdinosaurCommented:
If the definition of the containing block is causing you some confusion might I suggest:

http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details

However be aware that IE is not exactly to standards because of the way it uses margins and padding.

Cd&
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.