Positioning question

okiiyama · May 24, 2005

I've started using div tags to replace some of my large nested tables and also for this and that. I've read a bit and somewhat understand positioning (absolute and relative), but I have a couple of questions:

Using position: absolute; Is the reference point always the top left corner of the page (0,0) ? Or is the reference point the top left point of whatever contains the element being positioned?

Using position: relative; top and left position the element relative to where its "natural" position would be, right? What about nested elements having all or some positioned relatively? Is this something that needs to be considered using position: relative?

Hopefully, this is 'sensical'

Thanks.

BabyJeffy · May 24, 2005

You got it right with "Or is the reference point the top left point of whatever contains the element being positioned?". That is pretty much it.

If you have position:absolute then your top/left is anchored from the top/left of the enclosing element.

Jeff

BillyRayPreachersSon · May 24, 2005

There is an extra thing when using absolute positioning. An absolutely positioned element is positioned relative to its closest positioned parent element.

For example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-language" content="en" />
	<title>Position Test</title>

	<style type="text/css">
		#div1 {
			position: absolute;
			left: 10px;
			top: 10px;
			background-color: red;
		}

		#div2 {
			position: absolute;
			left: 10px;
			top: 10px;
			background-color: green;
		}

		#div3 {
			position: absolute;
			left: 10px;
			top: 10px;
			background-color: blue;
		}

		div {
			width: 100px;
			height: 100px;
		}
	</style>
</head>

<body>
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
</html>

If div2 was not positioned absolutely, you would get different results.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

ChrisHunt · May 25, 2005

Just to futher clarify what Dan said, the "positioned" parent (or grandparent etc) element can be positioned absolutely or relatively, and needn't be moved from its original position. You'll see this kind of thing quite a lot:

Code:

<div style="position: relative">
  <p style="position:absolute; bottom:0; left:0">
  This paragraph is positioned in the bottom left of its parent element!
  </p>
  ... other div content ...
</div>
[code]
Whenever you see [tt]position:relative[/tt] being applied to an element without a [tt]top[/tt] or [tt]left[/tt] rule to go with it, the chances are its got some absolutely positioned children.

I'm afraid I don't understand your question about relative positioning. If you position an element (absolutely or relatively) its children will go with it.


-- Chris Hunt
[url=http://www.mcgonagall-online.org.uk][i]Webmaster & Tragedian[/i][/url]
[url=http://www.extraconnections.co.uk]Extra Connections Ltd[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Positioning question

okiiyama

IS-IT--Management

BabyJeffy

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor