Absolute positioning in CSS

Absolute Positioning -

  1. An absolutely positioned element is removed from the normal flow. This positioning scheme applies to any element that has its position porperty absolute or fixed.
  2. This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.
  3. Normally absolutely positioned elements are positioned by the top and left property assigned to them.
  4. This top and left works with respect to the container block of this absolutely positioned element. This top and left are called offset positions.
  5. Absolute positioning always works w.r.t the container block of this absolutely positioned element.
  6. Absolute elements create a new coordinate system for child elements inside them.
  7. This is an exellent property of ABSOLUTE POSITIONING : Use all four offset properties (TOP, LEFT, BOTTOM, RIGHT), and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself if there is no container.

The containing block of an absolutely positioned element is defined by its closest positioned ancestor. That is ancestor element outside it should have position property set to absolute, relative or fixed. If there is no such ancestor element then the browser window will be used. For the absolutely positioned element the container element can be an inline element.

<div id="container">This is container div

<div id="red" class="abs">This is child div</div>
<div id="blue" class="abs">This is child div</div>
</div>

For non-absolutely positioned element the container should be a block level element.

Change the positioning property of the container DIV – In the following section note that the container DIV (of ID container) has position: relative, just change it to position: absolute or omit it, check how it behaves. If you don’t mention any position: that means position: static.

According to the positioning property of the container DIV you can assign TOP, LEFT etc property to the container element and check how the inner DIVs red and blue behaves..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<head>
<style type="text/css">
.abs {
position: absolute;
width: 100px;
height: 100px
}
#container {
position: relative;
width: 300px;
height : 300px;
background-color: yellow;
}
#red {
background-color: red;
top:0;
left:0;
}
#blue {
background-color: blue;
top:0;
right:0;
}
</style>
</head>
<body>

<div id="container">
<div id="red" class="abs"></div>
<div id="blue" class="abs"></div>
</div>
</body>
</html>


Container DIV (position : ABSOLUTE), and child DIV elements are also ABSOLUTELY POSITIONed. So in the stylesheet only the following section changes.

#container {
position: absolute;
width: 300px;
height : 300px;
background-color: yellow;
}

Click here to check the output


Now we are changing the positioning property of container DIV to RELATIVE.

Container DIV (position : RELATIVE), and child DIV elements are also ABSOLUTELY POSITIONed. So in the stylesheet only the following section changes.

#container {
position: relative;
width: 300px;
height : 300px;
background-color: yellow;
}

Click here to check the output


Now we are removing the position property from the Container DIV (that means the CONTAINER DIV is of position:static.

Child DIV remains ABSOLUTELY POSITIONed. So in the stylesheet only the following section changes.

#container {

width: 300px;
height : 300px;
background-color: yellow;
}

You can also write position:static , the result is same.

#container {
position:static;

width: 300px;
height : 300px;
background-color: yellow;
}

Click here to check the output , I think it the child element DIVs flies out and find out the next higher level parent whose position property is defined and NOT static.


Mr. B Choudhury is a search engine optimization specialist and a PHP MySQL programmer himself and run a group of web designers called Web Designers House. Professionally Mr. Choudhury is a PHP Developer and a SEO Advisor.

Google+

Learn Web Design in Kolkata (Google+ profile) explains the CSS positioning property position:absolute , here he has shown how position:absolute can be applied for CHILD and PARENT DIV. Instead of DIV you can use any block level elements.

Mr Choudhury teaches Computer and Web Design related topics from home and you can learn from home too. Just visit www.onlinecomputerteacher.net for more info.