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
Solved

<DIV> layer "relative" position

Posted on 2003-12-05
7
794 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
  • 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

856 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