PDA

View Full Version : Problem understanding CSS position:relative



Doctor_Varney
Sep 13th, 2010, 05:27 PM
Note: If you find this question overly-verbose, the sentences in bold should summarise the question sufficiently.
----------------------------------------------------------------------------

I have a problem understanding the precise role the inclusion of "position:relative" plays in my code - in this particular instance.

First, please re-aquaint yourself with this method (http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks), devised by Mathew James Taylor.

Particularly take note of this excerpt of code he uses to re-position the columns:


The CSS relative positioning rules

Here is the CSS showing the the addition of relative positioning.

#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}

Here, position:relative makes sense because he needs to control DIV positions relative to their parent containers.

But here's where I get confused:
If you take a look at a rough toile of my current project (http://www.tengunade.pwp.blueyonder.co.uk/experiments/hammerglamour/) you'll see I've used the idea of nesting DIVs to create layered backgrounds... but it differs from Mr. Taylor's in that I have no need to position my layers in the way he must. In fact, I think mine has more in common with the 'faux columns' technique because I am using bg images for my layers. Mr. Taylor must use relative positioning because he's using background-color but mine uses background-image, which means I can take advantage of background-position to do the work instead.

Now, what I can't understand is why I still need this position:relative rule in there!? Removing it causes the layout to crash.

The way I understand it, I don't see how position:relative can have any meaning without it also possessing a value. Since none of my layer DIVs seem to need any positional values, why does my layout bork up when I remove position:relative from these DIVs?

The way I see it, is that any nested elements must already be positioned relative to their containers before any positional attributes are applied... If you put something inside something else, then it's position automatically assumes top/left inside of it's parent - then it's up to us to decide whether to margin it or declare a position in pixels, relative to it's parent?

In short - why do I need position:relative for this layout to work?

And if I need it - how do I know which DIVs need it and which don't? I know that the absolute-positioned #menublock I've created is an exception, but I'm able to manage it with position:absolute, quite apart from the rest of the layout. But why would anything in that layout need relative positioning at all?

Evidently, I must have misunderstood how relative positioning works, so any help towards grasping this concept properly will be most graciously recieved.

Thanks in advance

Dr. V

SB65
Sep 13th, 2010, 06:35 PM
Hello Dr V

I can't see where you're using position:relative in your page except in #column2 for the absolute positioned div within it. Maybe it's my eyes...

EDIT: And to answer your question, I can't see why you'd need position:relative for any other reason.

Doctor_Varney
Sep 13th, 2010, 06:42 PM
Well, I did actually remove it from some of the DIVs in the CSS. I could of course use this as a basis for troubleshooting (keep commenting them in and out until I find where it's actually needed) but without a proper understanding of the issue, it's easy to get confused. I need a reason to have relative position and I also need to understand that reason.

Ta

Dr. V

effpeetee
Sep 13th, 2010, 06:46 PM
You have probably seen this, but just in case.

Here it is. (http://www.vanseodesign.com/css/css-positioning/)

Frank