Absolute Position (CSS)

What is “position:absolute” in CSS ? To learn absolute positioning CSS property you must understand block level & inline elements, normal flow concept of CSS. You must know normal flow first, then learn absolute position concept.


Box model, Normal Flow > Absolute positioning


Absolute Positioning Explained

  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.


Beside Web Design if you are planning to learn Graphic designing then visit this page to Graphic designing training courses in Kolkata , also you can learn online.

About Mr Choudhury

Mr Choudhury, a professional PHP Website Developer, mobile app & java developer & an expert on HTML5, CSS3, JavaScript, jQuery PHP WordPress. He is a Computer Science Graduate and Masters in Technology in Computer Science. He is highly involved in responsive website designing, mobile app development, Java system development & SEO consultancy for 15 years. Call Mr. Choudhury (+91).9163111390 or visit his website http://www.bikramchoudhury.org