Four positioning methods of CSS layout
1. Static (static positioning):
Defaults. Without positioning, the element appears in the normal flow (ignoring top, bottom, left, right or z-index declarations). Refer to the previous essay.
2. Relative (relative positioning):
The element positioned as relative is separated from the normal document flow, but its position in the document flow still exists, but it is visually moved relative to the original position.
Positioning relative to its normal (original) position through the top, bottom, left, and right settings. Hierarchical grading can be done through z-index.
.static1{
height:80px;
background-color: red;
}
.relative{
height:80px;
position:relative;
top:40px;
left:40px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="relative"></div>
<div class="static2"></div>
</body>
It refers to the original point of the parent as the original point by default (the parent does not have to set the position attribute), regardless of whether the parent exists or not, whether there is TRBL or not, it is positioned at the upper left corner of the parent, but the parent’s The Padding property will affect it.
If there is no parent, the original point is at the bottom of the previous element in the order of the text flow
3. Absolute (absolute positioning): Generate absolutely positioned elements, which are positioned relative to the first parent element other than static positioning. The position of the element is specified by the "left", "top", "right" and "bottom" attributes. Hierarchical grading can be done through z-index.
The layer positioned as absolute is separated from the normal document flow, but the difference from the relative is that its position in the normal flow no longer exists.
This attribute is always misleading. It is actually wrong to say that when the position attribute is set to absolute, it is always positioned according to the browser window. In fact, this is the characteristic of the fixed attribute.
1. If there is no TRBL (top, right, bottom, left), use the upper left corner of the parent. When there is no parent, refer to the upper left corner of the browser.
2. If TRBL is set, and the parent does not set the position attribute (position: static; does not count as setting the attribute), then the current absolute will be positioned with the upper left corner of the browser as the original point, and the position will be determined by TRBL.
3. If TRBL is set, and the parent sets the position property (no matter absolute or relative), then the upper left corner of the parent is used as the origin for positioning, and the position is determined by TRBL. Even if the parent has the Padding property, it will not work on it.
<style type="text/css"> .static1{ height:80px; background-color: red;
} .father{ height:100px; background-color: pink; position:relative; left:20px;
} .relative{ height:80px; width:80px; position:absolute; top:10px; left:10px; background-color: black;
} .static2{ height:80px; background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>
4. Fixed (fixed positioning): Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified by the "left", "top", "right" and "bottom" attributes. Hierarchical grading can be done through z-index.
1. If there is no TRBL (top, right, bottom, left), the original point of the reference parent is the original point by default (the parent does not have to set the position attribute).
2. If TRBL is set, position it relative to the browser window.
<style type="text/css"> .static1{ height:80px; background-color: red;
} .father{ height:100px; width:300px; background-color: pink; left:100px; top:100px;
} .relative{ height:80px; width:80px; position:fixed; left:20px; background-color: black;
} .static2{ height:80px; background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div></pre>
z-index attribute
Z-index, also known as the stacking order of objects, uses an integer to define the level of stacking. The larger the integer value, the higher the stack will be. Of course, this refers to the stacking of elements at the same level. If two objects are stacked If this attribute has the same value, it will be stacked according to the order in which they flow in the HTML document, and the ones written later will overwrite the previous ones. It should be noted that the parent-child relationship cannot use z-index to set the upper-lower relationship, and the child must be above the parent.
Note: The z-index attribute of elements with static positioning or without position positioning is invalid.