The layer layout model is like the very popular layer editing function in the image software PhotoShop, and each layer can be accurately positioned. There are three types of
layer models:
1) Absolute positioning (position: absolute)
2) Relative Positioning (position: relative)
3) Fixed positioning (position: fixed)
2. Absolute positioning
If you want to set the absolute positioning in the layer model for the element, you need to set position:absolute (representing absolute positioning), the function of this statement is to drag the element out of the document flow, and then use the left, right, top, bottom properties relative to its The closest parent containing block with the positioned property is positioned absolutely. If no such containing block exists, relative to the body element, i.e. relative to the browser window
/* Set the div tag relative to the browser, (relative to the upper right corner of the previous position) to the left by 100 pixels and down by 20 pixels */
div{
width:200px;
height:200px;
border:2px red solid;
position: absolute;
right: 100px; /* move 100 pixels to the left */
top: 20px; /*move down 20px*/
}
3. Relative positioning
is the relative positioning in the element setting layer model, you need to set position:relative (representing relative positioning), which determines the offset position of the element in the normal document flow through the left, right, top, bottom attributes. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then move relative to the previous position. The direction and magnitude of the movement are determined by the left, right, top, bottom attributes , the position before the offset remains unchanged.
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
The position before the offset remains unchanged: a span tag is added after the div tag, and some text is written in the span tag.
<body>
<div id="div1"></div><span>The position before the offset remains unchanged and cannot cover the position of the previous div before the offset</span>
</body>
4.
4. Fixed positioning
ixed: Indicates fixed positioning, similar to the absolute positioning type, but the coordinates of its relative movement are the view (the web page window on the screen) itself. Since the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the screen position of the browser window around the screen, or change the display size of the browser window, so the fixedly positioned element will always be in the A position of the view within the browser window that is not affected by the flow of the document, which is the same function as background-attachment:fixed;.
/* Move 100px to the right and 50px down relative to the browser view. And the position is fixed when the scroll bar is dragged. */
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
5. Use Relative and Absolute in combination to position
relative to other elements.
The referenced element must be the predecessor element of the relative positioned element:
<div id="box1"><!--Reference positioned element-->
<div id=" box2">Positioning relative to the reference element</div><!--relative positioning element-->
</div>
It can be seen from the above code that box1 is the parent element of box2 (of course the parent element is also the predecessor element).
div{border:2px red solid;}
#box1{
width:150px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:20px;
left:30px;
}
<body>
<div id="box1">
<div id="box2">position relative to the reference element</div>
</div>
