Positioning properties enhance the flexibility, and make CSS a very powerful presentation language. They are used to position elements in a webpage. By default, elements are positioned in a normal flow i.e. block level elements such as <p>, <h1> will be laid from top to bottom and inline elements such as <b>, <1> will be laid from left to right.
However, you can also place the various elements at desired positions in a browser window or at the top of others using these properties.
We’ll be covering the following topics in this tutorial:
CSS Position
The POSITION property is used to position various elements at the desired place in the webpage. The various values that can be assigned to it are
| Value | Meaning |
| Static(default) | Sets the position according to the normal flow. |
| Relative | Positions the element in normal flow and offset it by some amount using the box offset properties. It may result in overlapping with other elements that are also positioned on the page. |
| Absolute | Takes the element out of normal flow and positions it at a specific place with respect to top left border of the parent element whose position property is relative or fixed. If parent element is nbt present, it positions according to browser window. |
| Fixed | Same as absolute except the element is positioned with respect to the browser window, Moreover, element with fixed value will not scroll with a webpage. IE6 does not.supports it. |
When positioning element with relative, absolute or fixed values, the box offset properties are used to offset the element. These properties are TOP, LEFT, RIGHT, BOTTOM. Each can take a value of length, percentage or Auto. Let us consider an example,
<html> <head> <title> Position properties </title> <style> p{ background-color : yellow; width : 1OOpx; border :2px solid black; position : relative; } b{width: lOOpx; background-color: cyan; position: absolute; top:20px; left:30px; } </style> </head> <body> <p>Here is a paragraph on which relative positioning is verified. <b>It is very important part of css</b> We should check the same with other values of position property, </p> </body> </html>
If both the left and right properties are specified, the width of the element is implied. If top and bottom properties are provided then height of element is implied.
CSS Z-Index
The Z-index property is used to specify how absolutely positioned element boxes stack on the top of each other when they overlap. Z-index accepts an integer value in the range 0 to 32767. Elements with higher Z-index property will display in front of those with lower Z-index property value. If both have the same value then the one that appears first in the code is displayed on the top.
By default, value of Z-index is auto which means that every subsequent element has higher index value than the one before. It is very useful when you want to drop a shadow behind the text. Let us now consider an example to explain Z-index property.
<html> <head> <title>Z index property</title> <style type="text/css"> p{background-color : yellow; width : 1OOpx; z-index:2; position: absolute; } b{width:1OOpx; position: absolute; left:80px; background-color: cyan; </style> </head> <body> <p>it is raining heavily outside so take your umbrella along with you </p> <b> But I am going by car</b> </body> </html>
CSS Float
The FLOAT property allows you to set an element to the left or right margin in such a way that the other contents wraps around it. It is ideal for situations when you want to put the content side by side. The possible values that this property can hold are none, left and right.
Float property is ignored when you set the position property to either absolute or fixed For example:
<html> <head> <title> Float properties </title> <style type="text/css > p{background-color : yellow ; float: right; } b{background-color: red;} </style> </head> <body> <h1>Floating properties </h1> <hr> <p>i am the best boy </p> <b>i am an intelligent girl </b> </body> </html>
CSS Clear
The CLEAR property is used in relation with float property. It controls the floating contents in such a way that the contents do not wrap around it instead it pushes them under the float element. The values it can have are Left, Right, both and none.
If clear is set to left then element contents will be cleared from the left side of the floating contents. Similarly in case of others. Let us consider an example,
<html> <head> <title> Clear properties </title> <style type="text/css > p{background-color : yellow ; float: right; } b{background-color: cyan; clear:right; } </style> </head> <body> <hl >Clear properties </h1 > <hr> <p>i am the best boy </ p> <b> i am an intelligent girl </b> </body> </html>
CSS Overflow
The OVERFLOW property is used when the element’s content are larger enough than the space (i.e. height and width) allocated to it. Using this property, the overflowing contents of the element would either be hidden, scrolled or visible. This is made possible by assigning values such as visible (default), hidden, scroll and auto to it. For example:
P{overflow : auto; Width : 100px; Height : 50px;}
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular