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
- 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.
- This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.
- Normally absolutely positioned elements are positioned by the top and left property assigned to them.
- This top and left works with respect to the container block of this absolutely positioned element. This top and left are called offset positions.
- Absolute positioning always works w.r.t the container block of this absolutely positioned element.
- Absolute elements create a new coordinate system for child elements inside them.
- 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=”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.
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.
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.
width: 300px;
height : 300px;
background-color: yellow;
}
You can also write position:static , the result is same.
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.
Absolute positioned DIV, inside relative container
Mixing relative positioning and absolute positioning together
How to apply absolute positioning inside relative positioning container element explained in this example. Here the container is a DIV block with relative positioning and an absolutely positioned element (it is also a DIV block) will be placed inside this container DIV.
In this example we have placed a container DIV with Gray background which is relatively positioned and a pink DIV which is actually a child div inside contained div.
Code:
<div id="containerDiv">
<div id="childDiv">
This is child div
</div>
</div>
<style type="text/css">
#containerDiv { position:relative; width:300px; height:200px; background-color:#666}
#childDiv { position:absolute; top:30px; right:10px; width:100px; background-color: #C6C }
</style>
Relative positioning has been set on DIV of id=containerDiv, any elements within containerDiv (id=containerDiv) will be positioned relative to containerDiv not with respect to the browser.
The child DIV (id=childDiv) is positioned absolutely within the "containerDiv". So the childDiv which has position:absolute will be placed inside containerDiv, not with respect to the browser.
Then we set childDiv properties as top:30px; right:10px;
So childDiv (id=childDiv)’s top right point will be placed 10px left from the right edge of container div (id=containerDiv) and 30px below the top edge of container div (id=containerDiv)
About SEO : If you are looking for search engine optimization & website ranking in Google search then you may visit this page to know more about the cost packages, specially the search engine optimization & ranking cost for Google.
To learn web designing techniques from the Kolkata based classroom coaching visit www.onlinecomputerteacher.net. Here the tutors in Kolkata, provide coaching on web designing HTML5,CSS3,JavaScript jQuery.