PDA

View Full Version : Need help on relative position and absolute positioning....!!!

wanye
03-30-2003, 04:34 PM
hi all, can anyone tell me wads the difference btw relative positioning and absolute positioning?
Because i have problems on layer position when the browser is maximised and minimised... can i fixed the layer position for both?
Mr J
03-30-2003, 05:28 PM
The following may help you out here




<html>
<head>
</head>
<body>

<SCRIPT language="javascript">
<!--
function Absolute(){
Span.style.position="absolute";
Text.innerHTML="absolute";
Text2.innerHTML="Body"
}
function Relative(){
Span.style.position="relative";
Text.innerHTML="relative";
Text2.innerHTML="paragraph"
}
function Static(){
Span.style.position="static";
Text.innerHTML="static";
Text2.innerHTML="paragraph"
}

// -->
</SCRIPT>

<P>The SPAN's position (top:100 left:100) is <B><span id="Text">static</span></B> in relation to the <b><span id="Text2">paragraph</span></b>.
<P><DIV style="border:1 ridge red; width:200;height:50">THE PARAGRAPH.</DIV>
<P><SPAN id="Span" style="position:static; top:100px; left:100px; border:1px solid #efefef;color:#000000;background-color: #ffffcb">SPAN.</SPAN>

<P><INPUT onclick="Static()" type=button value=Static>
<INPUT onclick="Relative()" type=button value=Relative>
<INPUT onclick="Absolute()" type=button value=Absolute>

</body>
</html>
cg9com
03-30-2003, 05:45 PM
absolute: specifies element position, and optionally size, with respect to the containing element if there is one.

relative: position can be calculated relative to the position in the normal flow of the document, it has no effect on other elements, and i believe relative can overlap eachother?
khaki
03-30-2003, 05:59 PM
Hi Wayne...

Since it's probably impossible to get enough examples until you can wrap your head around this concept... here's another:
( ;) k )

<html>
<head>
<style type="text/css">
#absoluteExample1 { position: absolute; left: 50px; top: 50px }
#absoluteExample2 { position: absolute; left: 200px; top: 250px }
#relativeExample1 { position: relative; left: 50px; top: 50px }
#relativeExample2 { position: relative; left: 50px; top: 50px }
</style>
</head>

<body>

<div id="absoluteExample1">
<b>absoluteExample1</b> places the text exactly at the x/y coordinate of 50, 50 on the page.
</div>

<div id="absoluteExample2">
<b>absoluteExample2</b> places the text exactly at the x/y coordinate of 200, 250 on the page.
<div id="relativeExample2">
<b>relativeExample2</b> places the text according to it's place within the structure of the
<br>div tag that it is nested within (50 pixels left and 50 pixels down from absoluteExample2
</div>
</div>

<br><br><br><br>
This is just some basic text that is written normally on the page.
<div id="relativeExample1">
<b>relativeExample1</b> places the text according to it's place within the structure of the document
<br>(50 pixels left and 50 pixels down from: <i>This is just some basic text that is written normally on the

page.</i>)
</div>

</body>
</html>
wanye
03-30-2003, 06:05 PM
but the prob is how do i fixed my layers so that the layers won't move when i am resizing my browser?
meow
03-30-2003, 07:01 PM
But we don't know your layers. :rolleyes:

'position: relative' positions the element relative where it would have been had it not been positioned.

If you have this:

<img src="blah.gif" width="200" height="200">
<p> BLAH BLAH BLAH</p>

You can move the P up over the image like so:

p { position: relative; top: -100px }

'position: absolute' is way more complex. It positions the element relative its containing box. "Containing box" has a special meaning and can be another positioned element. If there isn't any it's the browser window.

If the P isn't contained in another positioned element this will place it at the top right corner of the browser window.

p { position: absolute; top: 0; right: 0 }

If you instead put the P in a DIV with 'position: relative' it will be in the top right corner of that DIV and the DIV will be in the normal flow of the page. See the difference? This is why no one can give you a piece of code that just *works*.

http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
Mr J
03-30-2003, 07:19 PM
but the prob is how do i fixed my layers so that the layers won't move when i am resizing my browser?

Are you talking resizing as in a different resolution?
cg9com
03-30-2003, 08:52 PM
you can use pixel measurement to make sure your boxes dont shift around.