geeky · non php code

CSS Positions

A coworker asked me about CSS positions. I admit I’m no expert in this topic. However, I want to illustrate my brief understanding. Maybe you will find them helpful.

Position: static
Default, you don’t have to set it.

Position: relative
It’s like a ghost image. Setting the corresponding properties of top, left, right, or bottom will move this element out of the its original document location but it will not affect any surrounding elements. The surrounding elements will treat it as if its position never changed.

Position: absolute
Takes the element out of its normal document location. The corresponding properties of top, left, right, bottom will be based off its first parent element whose position is not static. Check out this example to get an idea. The parent element is bubbled all the way up until it finds the document window.

Position: fixed
Similar to the absolute position except its parent element is the browser window. I’ve tried using this many years ago and found that IE didn’t support it. It sounds like pre IE 8 never supported it properly. Because of this, I never found a great use for it.

If I confused you, the positions are explained in greater details here. I find it very well written.

One thought on “CSS Positions

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s