The content of positioning in CSS is:
position:relative | absolute | static | fixed
Static (static) has no special settings. It follows basic positioning rules and cannot be hierarchically graded by z-index, which is the default value.
Relative object can not be overlapped or separated from document flow. Reference to its static position, it can be located by top,bottom,left,right, and can be hierarchically graded by z-index.
Absolute location is located by top, bottom, left and right, separated from the document stream. If the parent of the object does not set the location attribute, the absolute element will be located at the origin of the body coordinate, and can be hierarchically graded by z-index.
Fixed (Fixed Location) The fixed reference here is an absolute coordinate positioning, which is fixed to a location in the browser window, such as a visual window, rather than a body or parent element, and is not affected by scrolling. Hierarchical hierarchy can be achieved through z-index.
Note:
Cascade classification of positioning in CSS: z-index: auto | namber;
auto follows the location of its parent object
namber. It can be a negative number. The default value is 0. The bigger the value is, the higher the value is, the smaller the element will be covered by the bigger the value is.
Relative object can not be overlapped or separated from document flow. Reference to its static position, it can be located by top,bottom,left,right, and can be hierarchically graded by z-index.
Absolute location is located by top, bottom, left and right, separated from the document stream. If the parent of the object does not set the location attribute, the absolute element will be located at the origin of the body coordinate, and can be hierarchically graded by z-index.
Fixed (Fixed Location) The fixed reference here is an absolute coordinate positioning, which is fixed to a location in the browser window, such as a visual window, rather than a body or parent element, and is not affected by scrolling. Hierarchical hierarchy can be achieved through z-index.
Note:
Cascade classification of positioning in CSS: z-index: auto | namber;
auto follows the location of its parent object
namber. It can be a negative number. The default value is 0. The bigger the value is, the higher the value is, the smaller the element will be covered by the bigger the value is.
Analysis:
-
Because div1 and div2 are absolute layouts, their locations are completely determined by left and top, independent of the padding of the parent element, and completely separate from the document flow.
-
Div3 and div4 are relative layouts, whose location is determined by left and top, but also by padding of the parent element and document flow. For example, div4 is affected by div3. Although its top and div3 are both 0, div4 is displayed below div4, because div3 can only follow the document flow and rank below div3 in the document flow.
-
div5 is a fixed layout, and its position is always in the upper left corner. Even if the browser scrolls, it is still fixed in the upper left corner.
-
For z-index, the default value is 0 if not written. The above example illustrates the function of Z-index very well.
-
The absolute layout, whose reference point is the nearest element with position attribute, will be different if the position attribute of main div is removed in this case. At this time, the reference points of div1 and div2 are body.
<html><head>
<style type="text/css">
body{margin:0px;padding:0px;line-height:100%;}
div
{
background-color:rgb(159, 206, 159);
width:95px;
height:95px;
margin: 0px 0px 1px 1px;
padding:0px;
/*display:inline-block;*/
letter-spacing:1px;
/* only for ie*/
*display:inline;
*zoom:1;
border:1px solid #ffffff;
border-radius:5px;
-moz-border-radius:5px; /* Old Firefox */
opacity:1;
text-align:center;
color:white;
}
#main{width:400px;height:300px;}
</style>
</head>
<body>
<div id="main" style="
position: relative;
margin: 50px;
padding: 80px;
">
<div id="div1" style="
position: absolute;
left: 83px;
top: 0px;
background-color: rgb(199, 219, 50);
">div1 absolute</div>
<div id="div2" style="
position: absolute; left: 0px;
top: 90px;
background-color: rgb(1, 214, 35);
z-index:10;
">div2 absolute z-index<br/>:10</div>
<div id="div3" style="
position: relative; left: 0px;
top: 0px;
background-color: rgb(23, 178, 238);
z-index:11
">div3 relative z-index:11</div>
<div id="div4" style="
position: relative; left: 0px;
top: 0px;
background-color: rgb(23, 178, 238);
z-index:0;
">div4 relative z-index:0</div>
<div id="div5" style="
position: fixed; left: 10px;
top: 10px;
background-color: rgb(229, 122, 238);
">div5 fixed</div>
</div>
</body></html>