CSS Positioning

Understanding CSS Positioning

Skip to end of metadata

Go to start of metadata

 

 

 

 

 

 

Overview


“position” is used to determine where elements should be placed on our web page.

There are generally four ways to position elements on a page.

  1.     static
  2.     relative
  3.     absolute
  4.     fixed

Back to top

 

1. Static Positioning


HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. top, bottom, left, and right CSS have no effect on statically positioned elements.

This is the basic positioning of an element and also the most simple one. An element with position:static fills the space its contents need. whether that is display:block or display:inline depends on the element’s standard display (for example, a <div> has display:block, while a <span> has display:inline) or on what you specify in your CSS.

 

2. Relative Positioning


Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

 

3. Absolute Positioning


Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window.

If the parent element is positioned(relative or absolute), then the coordinates is determined from the top left corner of the parent element and not the top left corner of our browser window.

You set the location of an absolutely positioned element through the top, right, bottom, and left properties. You’ll only define two of these, either top or bottom, and either left or right. If none of those four are specified then a default of 0 is given to the top and left properties.

4. Fixed Positioning


Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements.

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. Fixed positioned elements are removed from the normal flow.

Fixed positioned elements can overlap other elements.

/* Example */
.pos_fixed
{
 position:fixed;
 top:30px;
 right:5px;
}

NB: As always,Internet Explorer gives us some trouble. IE supports the fixed value only if a !DOCTYPE is specified.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s