The positioning property of CSS is used to give a position of an element. Remember that, the floating property also gives a position but it and the positioning property are not same strategy. When you apply the floating property then the element is floating on the web page, but when you use the positioning property then the element gets the exact position with the help of offset value of the positioning property.
The positioning property receives four values:
- static
- absolute
- relative
- fixed
These values have four offset properties:
- top
- right
- bottom
- left
At first I discuss about absolute positioning then relative then fixed and then static. But before describing these I want to give you some basic idea of offset value.
The offset value:
The offset value specifies the distance of an element from top, right, bottom or left corner of the viewport or another element. If top: 0 then the element remains exactly top of the viewport or an element. If right: 30px then the position of the element will be 30px from right and if left: 30% then the distance will be 30% of the total width of the viewport or an element. So it is the main criteria to detect the position of an element. You can make a combination of these offset values. When you use top: 30px; left: 40px; then it gives you a distance from top-left corner.
Absolute Positioning:
The absolute positioning allocates an absolute position and renders space absolutely. This property uses offset value or the combination of all offset values.
Remember that:
- If an element has an absolute position then it takes position relatively with viewport.
- If an absolute positioned element takes place under a relative positioned element then it works relatively its parent element.
Example:
<!DOCTYPE html><html> <head> <title>Absolute positioning</title><style> div#external{ height: 300px; width: 600px; border: 1px solid red; }div#internal{ height: 150px; width: 300px; border: 1px solid green; position: absolute; top: 50%; right: 20%; } </style></head> <body> <div id="external"> <div id="internal">
output:
![Absolute Positioning:]()
Now change the CSS code of external box as position: relative and then you get an internal box which is relative with external box but absolute with itself.
![CSS code of external box as position:.]()
Relative Positioning:
The relative positioning property specifies a position for an element relative to another element. This property always depends on its parent element. This property is like static positioning and z-index may need for many relative positioned elements. I will describe later about z-index. The absolute positioned element always follows the relatively positioned element if it exists.
The relative property uses all offset value but it cannot use all possible combinations of offset value. Remember that:
- You can make a combination with top and left.
- You can make a combination with right and bottom
So the combination of top and right or top and bottom are not effective. It also allows using negative values of offset value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning</title>
<style>
div#external{
height: 300px;
width: 600px;
border: 1px solid red;
}
div#internal{
height: 150px;
width: 300px;
border: 1px solid green;
position: relative;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<div id="external">
<div id="internal">
Output:
![Relative Positioning:]()
Fixed positioning:
The fixed positioning property gives a fixed state of an element. If you scroll contents of a web page then this fixed positioned element remains fixed in its position. When you declare the fixed positioning property then that element allocates spaces for its own. It does not depend on its parent element.
Example:
<!DOCTYPE html> <html> <head> <title>fixed positioning</title> <style> div#fixed{height: 200px; width: 400px; border: 2px solid green; background: tan; text-align: center; color: red; position: fixed;top: 30%; left: 30%; } </style> </head> <body> <div id="fixed">
Output:
![Fixed positioning.]()
Static positioning:
The static as a property of position is the default position. Whatever you use the text, box or any element is all static positioned by nature.1
Z-index:
The z-index property is a very important topic for positioning elements. It specifies which element remains above another element. It is useful for the positioning property of CSS. Here’s some notes on the z-index property:
- It supports top, right, bottom and left offset values.
- It receives positive or negative values.
- The largest valued element remains on top of all elements.
- The lowest valued element remains on downward of all elements.
- Only those elements might have z-index which has the position property.
- It allows auto value.
- It supports nested z-indexing. For nested z-indexing it follows the value of nested elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>z-index</title>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid red;
text-align: center;
}
#zindex1 {
z-index: -10;
top: 10px;
left: 50px;
background: #CC5;
}
#zindex2 {
z-index: 20;
top: 80px;
left: 130px;
background: #CCF;
}
#zindex3 {
z-index: 10;
top: -40px;
left: -55px;
width: 120px;
height: 120px;
background: #FCC;
}
#zindex4 {
z-index: 50;
top: 120px;
left: 5px;
background: #5CC;
}
</style>
</head>
<body>
<div id="zindex1">1st box</div>
<div id="zindex2">
2nd box
<div id="zindex3">
3rd box
</div>
</div>
<div id="zindex4">4th box</div>
</body>
</html>
Output:
![z-index property.]()
In this example, box 4 has the largest z-index and box 1 has the lowest z-index. So box 4 stays above all boxes and box 1 stays down all boxes. The appearance flow of 4 boxes:
Box 4 -> box 3 -> box 2 -> box 1
When you use z-index: auto then it assigns z-index for elements automatically.
The post CSS Positioning :(CSS Tutorials:part-11) appeared first on Tech-info24.com | Popular Newsletter on Information Technology..