using absoulote position or relative position

**pizza** · 04-19-2007, 02:49 AM

i cant decide what is better, i used to use absoulte because i thought i have more control , but now i relize that when you change the size of the browser (manualy) my divs change there position. so i tried relative and from what i understand the relative means that the location is relative to the div that is written before in the html.

my problem is i am not sure that what i am saying is correct because in one case i have a few divs that i want to switch between them by using visibilty hidden and visible. so they are located one under the other in the html :

Code:

 <div id="Discription1" >
   <img src="images/prestentation1.jpg" /><br />
   some text<br /><a href="#" onclick="window.open('powerOfTen.html','window_name','scrollbars=no,width=820,height=600');">לצפייה</a>      </div>
 <div id="Discription2" >   
<img src="images/prestentation2.jpg" /><br /><a href="#" onclick="window.open('hamachpela.html','window_name','scrollbars=no,width=780,height=480');"> xome text</a> </div>

i am using the id="Discription1" in order to call them from javascript and also to add style

Code:

#Discription1{
position:relative;
margin-right:184px;
 margin-top:-215px;
}

so the relative is to the div before? so my margin-top should change from div to div right? i cant figure out how this works in this case....
i hope you had the patience to read this very very long question..
and help me not make it a monolog..

**LadynRed** · 04-19-2007, 11:07 AM

Quote:

from what i understand the relative means that the location is relative to the div that is written before in the html.

Not exactly. The element is positioned relative to it's nearest POSITIONED ancestor. So, if you have a #wrapper div set to position: relative, an div INSIDE #wrapper would be positioned relative to #wrapper - it's nearest positioned ancestor.

The error that most newbies make is to set positioning on everything or at least a lot more than is necessary. Better to learn to use the normal document flow and then only use positioning where it's really needed.

In the example you've given, #discription1 would be positioned relative to <body> unless you've got positioning on another element that #description1 is sitting inside of.
I can't tell what might be affecting #description2 without seeing ALL of your code.

http://www.barelyfitz.com/screencast...s/positioning/

**pizza** · 04-20-2007, 04:08 AM

all my divs are inside one main div named td

Code:

.
td{
margin:0 auto;
width:640px;
height:520px;
background-color:#42CBCC;
 border:1px solid #000000;
}

so description1 is relative to my td div but it looks like that only in the margin-right because the margin-top seems like being relative to the div written above it in the html. and here i have the problem, that it doesnt seem to work consistently...

**LadynRed** · 04-20-2007, 03:21 PM

It's NOT relative to TD because TD is not POSITIONED.
You misunderstood what I told you, positioning is relative to is nearest POSITIONED ancestor. The order in the document is not the controlling factor.

Why are you using tables anyway ? It seems pretty pointless to go so far to use divs and css and then stick the whole thing in a table. That's like putting a rolls royce inside a chevy body !

**pizza** · 04-22-2007, 03:58 AM

i am not using tables i just called my main warper div td......

**LadynRed** · 04-22-2007, 04:13 PM

Ok, then the name should be #td, not just 'td'. "TD" is the element and targets a table cell.