CSS knowledge collation (6) positioning
table of Contents
CSS knowledge collation (6) positioning
Positioning is to make the element block appear in the right position, which requires us to position with a certain reference object, which is divided into relative positioning, absolute positioning, and fixed positioning. The principle of this piece is relatively simple.
1. Relative positioning
Offset relative to the original position, the original position refers to the position of the document stream.
position: relative;
{
position:relative;
top:200px;
left:500px
}2. Absolute positioning
1. There is no positioned parent element, relative to the browser positioning
2. There is a positioned parent element, which is positioned relative to the meta element parent element
Three, fixed positioning
The position of the element is a fixed position relative to the browser window.
It will not move even if the window is scrolling:
Four, z-index
The positioning of elements has nothing to do with the document flow, so they can cover other elements on the page
The z-index attribute specifies the stacking order of an element (which element should be placed on the front or back), which is also the layer.
An element can have a stacking order of positive or negative numbers:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}The larger the z-index, the more displayed on the upper layer.