Solved

<DIV> layer "relative" position

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Ajax control editor 4 61
Adding a Li to a UL after a specified Li contents 2 42
Getting Column Height to Match Other Column 5 44
Bootstrap on PLNKR 3 13
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

914 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now