Positioning in CSS
Positioning in CSS refers to the techniques used to control the placement and layout of elements on a web page. There are different positioning properties in CSS that allow developers to precisely position elements relative to their normal flow within the document.
There are a number of properties in CSS which you can make use of, to position elements in the webpage layout:
|
Property |
Description |
Values |
|
bottom |
used to set the bottom margin edge for a positioned box. |
auto, length, %, inherit |
|
clip |
used to clip an absolutely positioned element. |
shape, auto, inherit |
|
left |
sets a left margin edge for a positioned box. |
auto, length, %, inherit |
|
overflow |
used to define what happens if content overflows an element's box. |
auto, hidden, scroll, visible, inherit |
|
position |
used to specify the type of positioning for an element. |
absolute, fixed, relative, static, inherit |
|
right |
used to set a right margin edge for a positioned box. |
auto, length, %, inherit |
|
top |
used to set a top margin edge for a positioned box. |
auto, length, %, inherit |
|
z-index |
used to set the stack order of an element. |
number, auto, inherit |
We can position an element using the top, bottom, left and right properties. These properties can be used only after the position property is set, otherwise, the above four properties will be ineffective.
Static Positioning
This type of positioned element is always positioned according to the normal flow of the page. HTML elements are static positioned by default. Static positioned elements are not affected by the top, bottom, left, right, and z-index properties.
Input:-
Output:-
Relative Positioning
A relatively positioned element is positioned relative to its normal position.
In the relative positioning scheme, the element's box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the top or bottom and/or left or right properties.
Input:-
Output:-
Note: A relatively positioned element can be moved and overlap other elements, but it keeps the space originally reserved for it in the normal flow.
Absolute Positioning
An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the top-left corner of the browser window. The box's offsets can be specified using one or more of the top, right, bottom, and left properties.
Absolutely positioned elements are taken out of the normal flow entirely and thus take up no space when placing sibling elements. However, they can overlap other elements depending on the z-index property value. Additionally, absolutely positioned elements can have margins, and these margins do not collapse with any other margins.
Input:-
Output:-
Fixed Positioning
Fixed positioning is a subcategory of absolute positioning.
The only difference is that a fixed-positioned element is fixed with respect to the browser's viewport and does not move when scrolled.
Input:-
Output:-
Note: In the case of the print media type, the fixed positioned element is rendered on every page and is fixed with respect to the page box (even in print-preview). IE7 and IE8 support the fixed value only if a <!DOCTYPE> is specified.
