Syntax:
position：static | relative | absolute | fixed | center | page | sticky
Default value:static
Applies to: exceptdisplayThe properties are defined astable-column-group | table-columnall elements except
Inheritance: None
Animation: No
Calculated value: Specified value
Media: Visual
Value:
static: Objects follow regular flow. At this time, the 4 positioning offset attributes will not be applied.
relative: The object follows the regular flow, and when it is offset with reference to its position in the regular flow through the four positioning offset attributes of top, right, bottom, and left, it will not affect any element in the regular flow.
absolute: The object breaks away from the regular flow. At this time, the offset attribute refers to the positioned ancestor element closest to itself. If there is no positioned ancestor element, it goes back to the body element. The box's offset position does not affect any elements in the regular flow, and its margins are not collapsed with any other margins.
fixed: Same as absolute, but the offset positioning is based on the window. When scroll bars appear, objects do not scroll.
center: Same as absolute, but offset positioning is based on the center point of the ancestor element as a reference. The box is centered vertically and horizontally within its containing container. (CSS3)
page: Consistent with absolute. When an element is within a paginated media or region block, the element's containing block is always the initial containing block, otherwise it depends on each absolute mode. (CSS3)
sticky: Objects follow normal flow when normal. It is like a combination of relative and fixed. When it is in the screen, it is typed according to the normal flow. When it is scrolled out of the screen, it behaves like fixed. The performance of this attribute is the adsorption effect you see in reality. (CSS3) * There may be description errors and changes in the new attributes of CSS3. They are for reference only and will be continuously updated.
Description:
Retrieve how the object is positioned.
当positionThe value is notstaticwhen its cascading level passesz-indexProperty definition.
Absolutely positioned elements, intop，right，bottom，leftWhen the attribute is not set, it follows its preceding sibling element, but positionally does not affect any elements in the regular flow. Using this feature you might do something like this:demo
The corresponding script properties areposition。
Example:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>position_CSS参考手册_web前端开发参考手册</title>
<meta name="author" content="https://www.4s5.cn/" />
<style>
#position {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 40px;
margin: -20px 0 0 -75px;
padding: 0 10px;
background: #eee;
line-height: 2.4;
}
</style>
</head>
<body>
<div id="position">水平垂直居中的对象</div>
</body>
</html>Use
During use, if an element in a separate box needs to be positioned, first set the positioning of the box torelative, and then set the elements inside toabsolutePositioning, so that the elements inside can be positioned relative to their parent box
