Home >Web Front-end >CSS Tutorial >What is the usage of position attribute in css
Usage of the position attribute in css: 1. General label elements without any positioning attributes are static positioning; 2. Absolutely positioned elements are dragged out from the document flow; 3. Relatively positioned elements cannot be stacked. ; 4. Fixed positioning is similar to absolute positioning, but it is positioned relative to the browser window and does not scroll with the scroll bar.
The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.
Usage of position attribute in css:
1. Static positioning (static)
General label elements are not Adding any positioning attribute is static positioning, and it belongs to the standard flow at the bottom of the page.
2. Absolute positioning (absolute)
The absolutely positioned element is dragged out from the document flow and uses left, right, top, bottom and other attributes relative to its maximum position. The closest parent element with positioning settings is used for absolute positioning. If the element's parent does not set positioning attributes, positioning is based on the upper left corner of the body element as a reference. Absolutely positioned elements can be stacked, and the stacking order can be controlled through the z-index attribute. The z-index value is a unitless integer, with the larger one on top, and can have negative values.
Absolute positioning positioning method:
If its parent element sets a positioning other than static, such as position:relative or position:absolute and position:fixed, then it will be relative Positioning is based on its parent element. The position is specified by the left, top, right, and bottom attributes.
If its parent element does not have positioning set, then it depends on whether the parent element of its parent element has positioning set. ,
If it still doesn’t exist, continue to infer to the higher-level ancestor elements. In short, its positioning is relative to the first ancestor element with positioning other than static positioning set,
If If all ancestor elements do not have one of the above three positionings, they will be positioned relative to the document body (not relative to the browser window, which is fixed relative to the window position).
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>Position the div with class="two" 50px from the top and left respectively. It will change the layout of other elements and will not leave any blank space in the original position of this element.
3. Relative positioning (relative)
Relatively positioned elements cannot be stacked. They can offset their position in the normal document flow based on left, right, top, bottom and other attributes. . You can also use z-index hierarchical design.
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>Position the div with class="two" 50px from the top and left of its original position. It will not change the layout of other elements, but will leave a blank space in the original position of this element.
4. Fixed positioning (fixed)
Fixed positioning is similar to absolute positioning, but it is positioned relative to the browser window and does not follow the scroll bar. scroll.
One of the most common uses of fixed positioning is to create a fixed header, fixed foot or fixed sidebar on the page, without using margin, border, or padding.
Related learning recommendations: css tutorial
The above is the detailed content of What is the usage of position attribute in css. For more information, please follow other related articles on the PHP Chinese website!