Any one clear in Positioning..

vuthcam · 11-15-2007, 01:59 AM

I have been using css for about months, frankly, i am still not sure about using Position; absolute, relative, static..:confused:. It's kinda a bad habit, when my layout doesn't satisfy me, i try to change those position around without knowing clearing how to use those. ideas??

Andrew · 11-15-2007, 02:27 AM

I just wrote out at least 4-5 paragraphs of information and code explaining what each does, but accidentally hit the back button and lost it all. If I have time later tonight or tomorrow, I'll rewrite it. Though, for now, you can go check out http://www.w3schools.com/css/pr_class_position.asp, as that's basically what I wrote, but more simplified.

Wildhoney · 11-15-2007, 02:33 AM

You silly bean, Andrew! I won't jump in and shove Andrew out the way as it was his explanation before mine :) so I do hope you find the time to re-type it! Fundamentally speaking, however, I tend to avoid positioning in the main parts of my code due to several issues that can commonly arise with their usage. I do, however, use them for SEO and accessibility purposes, for instance placing a logo over the text link of the website's name - this is good for SEO because search spiders can read them, and good for accessibility because individuals who are unfortunate enough to blind, their special applications will read the website's name aloud.

vuthcam · 11-15-2007, 02:49 AM

Using only one of those alone is ok, but the controversial things happen when trying to use the one inside others..

Thanks for resource Andrew

wGEric · 11-15-2007, 06:04 AM

This use to confuse me in the past and I thought this would be a good blog topic so I wrote a blog on it, http://www.ericfaerber.com/2007/11/1...tion-property/

Quote:

Some people have a hard time figuring out the position property in CSS. It took me a while to fully understand it and use it to it’s full potential. Here is some information on it and hopefully you can understand it.

position: relative; positions the element relative to it’s nromal position. An elements normal position is its position in the flow of the page. So top: 5px and left: 30px; will move it down 5 pixels and left 30 pixels from it’s normal position on the page.

position: absolute; moves it to a certain spot within the first parent element that has been positioned before it. This is where it gets tricky. This defaults to the browser window if you haven’t positioned any parent elements. Examples will make this easier for me to explain.

<h1>Positioning Example</h1>
<div style="width: 500px; height: 500px; border: 1px #000000 solid;">parent element
<div style="position: absolute; bottom: 0px; left: 0px">child element</div>
</div>
View Example

In this example, child element will be in the bottom left corner of the browser window although the parent element doesn’t go below 500 pixels or the window is shorter than 500 pixels. The child element will be in the bottom left corner of the browser window even if you can scroll below the page.

<h1>Positioning Example</h1>
<div style="width: 500px; height: 500px; border: 1px #000000 solid; position: relative;">parent element
<div style="position: absolute; bottom: 0px; left: 0px">child element</div>
</div>
View Example

In this example, child element will be in the bottom left corner of the parent element. This is because parent element has now been positioned so it becomes the containing block and position: absolute will move elements around within that block.

maZtah · 11-15-2007, 11:02 AM

You definiately should read the tutorials on the following website!

http://www.htmldog.com/guides/

vuthcam · 11-15-2007, 12:59 PM

Thanks everybody!! Your resources are really helpful!! I got many clues from those.

Wildhoney · 11-15-2007, 02:01 PM

Great post, Eric. The CSS positions used to baffle me as well.