CSS fun, ul {position: relative;}

[eclipse]

Can someone explain this to me a bit more? I thought to position elements and images, I had to whack an ID, Div's, or some sort of defined XHTML "element root" around the thing and then define how that behaves. (Element root being the opening and closing HTML tags or "Body" tags.)

Is this guy saying that an unordered list can act as an "element root" for everything inside the list? He's CSSing the list into a table with graphics, and has just said something about position relative giving a
"framework" to things within it. That confused me, because until then my definition for "position relative" was something like:

...in my own weird understanding...

CSS positioning
relative: relative to where the element or image would have been if we had left it alone, relative to it's original position, relative to itself, offset to where it "is" and the page still thinks that it "is" still in it's original position and leaves a space where it "was".
It can also give a framework to things within it, such as calling an unordered list or "ul" position: relative; will tell things in the list how to behave.

 

[angelwatt]

Yea, I think you're understanding it. I often make use of ul tags and position them around and manipulate the li inside. I often change the li to be horizontal rather than the default vertical arrangement. Though position: relative allows you to move the tag around a little more. Generally speaking you won't be moving it very far when taking this approach.

I use relative generally when I'm using absolute positioning on a tag inside that relative positioned element. Then for that absolute element, when I say top: 0, it goes to the top of that relative element and not the top of the page. It's relative to its parent.

 

[design-is]

This site has a good, in depth, but not overwhelming explaination of CSS positioning and the box model.

Hopefully it will be helpful in clarifying your thoughts.

 

[eclipse]

I use relative generally when I'm using absolute positioning on a tag inside that relative positioned element. Then for that absolute element, when I say top: 0, it goes to the top of that relative element and not the top of the page. It's relative to its parent.

Ahhhhaaaaaaa!

I said, "AAAAHHHHHHAAAAAAA!"




So if I have an image I want to be "centered" on the page I have to call the HTML tags or body tags "relative" to make the image inside it "relative" to the parent tags? If centering is so easy, why do some people use the "right auto left auto" thing to center stuff?

 

[angelwatt]

So if I have an image I want to be "centered" on the page I have to call the HTML tags or body tags "relative" to make the image inside it "relative" to the parent tags? If centering is so easy, why do some people use the "right auto left auto" thing to center stuff?

Well, you don't have to make it relative to be centered. Also, when you do, it doesn't automatically make it centered, which is where setting the margin property comes into play (the auto stuff, though there are multiple ways). I'd have to see examples to be more specific, but I think you pretty well have it.