Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

<DIV> layer "relative" position

Posted on 2003-12-05
7
Medium Priority
?
811 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 252 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 248 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

670 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