CSS Positioning 101

When it comes to web page layout, how you place your element on the page without effecting the document flow, you might probably think of CSS position property.  But if you are confused how this property works and when to use particular values of this property, here is a brief introduction of CSS position.

There are 5 values you can set to position property,  static, relative, absolute, fixed and inherit.   Static is the default value.

Static Positioning

As I said above, this is the default value of position property which means if you don’t set a specific value, the element will have static position.  The element with position static starts out where it has to be in normal document flow. Offest values, top,right, bottom and left won’t effect the element flow or position.

.box-1{
  background:#888;
  width:100px;
  height:100px;
  border:2px solid black;
}
.box-2{
  background:#FFFFFF;
  width:100px;
  height:100px;
  border:2px solid orange;
}
.box-3{
  background:yellow;
  width:100px;
  height:100px;
  border:2px solid blue;
}

See the result in following image.

static_pos

Relative Positioning

Relative position behaves like static position. Elements are positioned in normal flow with relation to other elements in the flow. But the difference is that you can declare offset value in order to position the elements.

.box-1{
  background:#888;
  width:100px;
  height:100px;
  border:2px solid black;

  position:relative;
}
.box-2{
  background:#FFFFFF;
  width:100px;
  height:100px;
  border:2px solid orange;
  position:relative;
  top:20px;
  left:20px;
}
.box-3{
  background:yellow;
  width:100px;
  height:100px;
  border:2px solid blue;
 position:relative;
}

See the result in following image.

relative_posAs you can see the above image, the element turns out at the position at top and left 20px related to other elements in document flow. You can also set margin-top and margin-left but the different is that margin value can be effect the document flow meaning that it will effects other elements’ position in the flow but offset values won’t.

Absolute Positioning

The third value is absolute.  The element set to absolute positioning is removed from normal document flow and starts it’s position at top left corner of the browser window no matter what other elements are positioned.  It appear with relation to browser viewport.

.box-1{
 background:#888;
 width:100px;
 height:100px;
 border:2px solid black;

 position:absolute;
}
.box-2{
 background:#FFFFFF;
 width:100px;
 height:100px;
 border:2px solid orange;
 position:absolute;
 top:20px;
 left:20px;
}
.box-3{
 background:yellow;
 width:100px;
 height:100px;
 border:2px solid blue;
 position:absolute;
 top:40px;
 left:40px;
}

The result will be the same as the following image.

absolute_pos

As you can see in the above image, elements are positioned no matter what other elements positions. They are completely out of document flow. The box with white background and orange border and the box with yellow background and blue border are set top and left offset values by 20px/20px and 40px/40px respectively. They appear with relation to browser viewport making them out of the flow. Their position starts at top 20px/40px and left 20px/40px without caring other element’s position.

Absolute Positioning Context

But you can change the positioning context of an absolutely positioned element which means you can set offset values with relation to it’s ancestor element.

.box-1{
  background:#888;
  width:100px;
  height:100px;
  border:2px solid black;

}
.box-2{
  background:#FFFFFF;
  width:100px;
  height:100px;
  border:2px solid orange;
  top:20px;
  left:20px;
}
.box-3{
  background:yellow;
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  top:5px;
  left:40px;
}
.container{
  margin:30px;
  border:3px solid gray;
  padding:10px;
  position:relative;
}

The box with yellow background is positioned as in the following image.

rel_abs_pos
The positioning context of a element set to absolute position can be change by wrapping them a relatively positioned element.  As you can see in the above css code, the parent element – has .container class – of the absolutely positioned element, yellow box, is set to relative position. The yellow box appears at the position related to it’s parent with container class. Let’s see what will happen when position value is removed from container class.

rel_abs_pos2As you can see in the above image, the yellow box is positioned in relation to browser viewport. When the parent element is positioned relatively, the box will come in within it’s parent’s border and positioned in relation to it’s parent element. That way we can freely position an element within a wrapper or container element.

Fixed Positioning

Fixed positioning is also similar to absolute positioning but it turns out fixing it’s position and won’t move when the browser is scrolled. And it’s positioning context is always viewport. Cannot change it’s position context by placing it within a relatively positioned element.

fixed_pos

You can take facebook as an example. Wherever you scroll down on the page, the notification bar with search box will remain at it’s position. You can achieve it by setting fixed position.

Inherit Positioning

This is is the simplest value of position property. An element with this position value will inherit the actual position value from it’s parent element.

Advertisements

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

%d bloggers like this: