Solved

<DIV> layer "relative" position

Posted on 2003-12-05
7
799 Views
Last Modified: 2008-03-17
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 }
0
Comment
Question by:BrianBaley
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
7 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 63 total points
ID: 9889667
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.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 62 total points
ID: 9890130
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&
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9890612
Then how is it that my example works as described?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9892215
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9892260
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&
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question