Under normal circumstances, the value of the position attribute of our element is static by default, that is, there is no positioning, and the element appears in the normal document flow. At this time, the offset attributes of left, right, bottom, and top that you set for this element are not The effect will not take effect. For example, if you set a declaration with an offset of 100px from the left margin: left:100px, then this declaration will not have any effect. Also, the z-index attribute will not take effect at this time.
That is to say, if we don't usually give an element a position attribute declaration, then it defaults to the situation I mentioned above, but because of the floating, we usually don't need to set the position attribute to the element!
But in some special cases, we have to use the position attribute, so today we will talk about the relative and absolute values of the position attribute,
first of all relative, relative positioning.
How to understand it? If I set relative positioning to an element, then first of all, this element will appear at the position where it should appear in the document flow like other elements, and then we can set its horizontal or vertical offset, so that this The element is moved relative to the starting point of its position in the document flow . One thing to note, when using relative positioning, even if the element is offset, it still occupies the space before it was offset . One thing worth noting here is that offsets are not margins, they are not the same as margins.
Let's take a look at the picture below: 
There are three floating blocks in the picture above. The second block is set with relative positioning position: relative. At this time, you can see that its position is no different from the other two blocks. The same is in the normal document flow.
Next, I set an offset for the block with position:relative: left: 50px; top: 30px Then let's take a look at the effect:
At this time, we find that the second block is offset from the starting point of its own position, but the position space it originally occupies is still there (the place marked by the dotted box), even if we set the offset to another Make it bigger, so that it leaves its original position completely, and its original position in the document flow will still exist and will not be filled by a third block floating over.
At the same time, its offset will not push other blocks away from their original positions in the document flow. If there is overlap, it will overlap other document flow elements instead of squeezing them apart, as shown in the figure That way, it's already overlaid on top of the third block.
We can set its z-index property to adjust its stacking order.
Next, let's take a look at absolute positioning: position:absolute is set to an element with absolute positioning, which does not occupy space in the document flow. If an element is set with absolute positioning, its position in the document flow will be deleted. So where did this element go? It floats up. In fact, setting relative positioning will also make the element float, but the difference between them is that relative positioning will not delete the space it occupies in the document flow, while absolute positioning will Remove the position of the element in the document flow , completely extracted from the document flow, we can set their stacking order through z-index.
So how does absolute positioning work? First of all, if its parent element has a positioning other than static, such as position:relative, or position:absolute and position:fixed, then it will be positioned relative to its parent element, and the position is left , top , right ,bottom attribute to specify that if its parent element does not have positioning set, then it depends on whether the parent element of its parent element has set positioning. The first ancestor element with a positioning other than static positioning (such as position: relative) is set. If all ancestor elements do not have one of the above three positioning positions, then it will be positioned relative to the document body (It is not a window, it is fixed relative to the window.)
Absolutely positioned elements are positioned relative to whom. We call this "who" the reference. Let's take a look at the following figure in conjunction with the above explanations to understand: 
Let's see Let's take a look at the effect in the browser, let's take a look at what it looks like without absolute positioning:
Then we set the absolute positioning for the second block: position:absolute and then set an offset: left:150px;top:40px; Then it becomes as shown below:
Another point is: when setting the offset, we can set a negative value.
Well, now that we understand relative positioning and absolute positioning, how should we apply them to practical cases?
First of all, let's take a look at the picture below: 
In the picture above, there is a small red block at the top left of the checkout button to the shopping cart, which is used to display how many items are in the shopping cart. You may not know this red color until you learn absolute positioning. How to realize the small block of , but now that I have just learned absolute positioning, this problem is no longer a problem.
I'll do it myself, let's get this background image out first: 
then we write HTML:
<div class="cart_btn">
<span><i>155</i></span>
<a href=" dd.html" target="_blank">Go to the shopping cart to checkout</a>
<b></b>
</div>
The span element in the HTML code above is the little red block used to display the number of items in the shopping cart , the a element is a text description, and the b element is the rightmost small triangle.
Let's take a look at the CSS code:
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px solid #eee;padding-left :30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn span{background:url(../images/picA.png) no-repeat -36px -54px;padding-left:7px;position:absolute; top:-12px;left:20px;}
.cart_btn span i{ float:left;height:20px;background:url(../images/picA.png) no-repeat right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px ;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color: transparent transparent transparent #CCCCCC;border-style:dashed dashed dashed solid;border-width:5px;height: 0;overflow: hidden;width: 0;}
In the CSS code above, we use the shopping cart icon as the background of .cart_btn, here We found a problem, that is, there are three icons on the picture. Everyone also found that the three elements I used for icons all use this picture as the background, but the display is different. Here is the background. positioning problem.
Finally, let's take a look at the effect in the browser:
Reference document: https://www.cnblogs.com/heroine/p/5852748.html
Under normal circumstances, the value of the position attribute of our element is static by default, that is, there is no positioning, and the element appears in the normal document flow. At this time, the offset attributes of left, right, bottom, and top that you set for this element are not The effect will not take effect. For example, if you set a declaration with an offset of 100px from the left margin: left:100px, then this declaration will not have any effect. Also, the z-index attribute will not take effect at this time.
That is to say, if we don't usually give an element a position attribute declaration, then it defaults to the situation I mentioned above, but because of the floating, we usually don't need to set the position attribute to the element!
But in some special cases, we have to use the position attribute, so today we will talk about the relative and absolute values of the position attribute,
first of all relative, relative positioning.
How to understand it? If I set relative positioning to an element, then first of all, this element will appear at the position where it should appear in the document flow like other elements, and then we can set its horizontal or vertical offset, so that this The element is moved relative to the starting point of its position in the document flow . One thing to note, when using relative positioning, even if the element is offset, it still occupies the space before it was offset . One thing worth noting here is that offsets are not margins, they are not the same as margins.
Let's take a look at the picture below:
There are three floating blocks in the picture above. The second block is set with relative positioning position: relative. At this time, you can see that its position is no different from the other two blocks. The same is in the normal document flow.
Next, I set an offset for the block with position:relative: left: 50px; top: 30px Then let's take a look at the effect:
At this time, we find that the second block is offset from the starting point of its own position, but the position space it originally occupies is still there (the place marked by the dotted box), even if we set the offset to another Make it bigger, so that it leaves its original position completely, and its original position in the document flow will still exist and will not be filled by a third block floating over.
At the same time, its offset will not push other blocks away from their original positions in the document flow. If there is overlap, it will overlap other document flow elements instead of squeezing them apart, as shown in the figure That way, it's already overlaid on top of the third block.
We can set its z-index property to adjust its stacking order.
Next, let's take a look at absolute positioning: position:absolute is set to an element with absolute positioning, which does not occupy space in the document flow. If an element is set with absolute positioning, its position in the document flow will be deleted. So where did this element go? It floats up. In fact, setting relative positioning will also make the element float, but the difference between them is that relative positioning will not delete the space it occupies in the document flow, while absolute positioning will Remove the position of the element in the document flow , completely extracted from the document flow, we can set their stacking order through z-index.
So how does absolute positioning work? First of all, if its parent element has a positioning other than static, such as position:relative, or position:absolute and position:fixed, then it will be positioned relative to its parent element, and the position is left , top , right ,bottom attribute to specify that if its parent element does not have positioning set, then it depends on whether the parent element of its parent element has set positioning. The first ancestor element with a positioning other than static positioning (such as position: relative) is set. If all ancestor elements do not have one of the above three positioning positions, then it will be positioned relative to the document body (It is not a window, it is fixed relative to the window.)
Absolutely positioned elements are positioned relative to whom. We call this "who" the reference. Let's take a look at the following figure in conjunction with the above explanations to understand:
Let's see Let's take a look at the effect in the browser, let's take a look at what it looks like without absolute positioning:
Then we set the absolute positioning for the second block: position:absolute and then set an offset: left:150px;top:40px; Then it becomes as shown below:
Another point is: when setting the offset, we can set a negative value.
Well, now that we understand relative positioning and absolute positioning, how should we apply them to practical cases?
First of all, let's take a look at the picture below:
In the picture above, there is a small red block at the top left of the checkout button to the shopping cart, which is used to display how many items are in the shopping cart. You may not know this red color until you learn absolute positioning. How to realize the small block of , but now that I have just learned absolute positioning, this problem is no longer a problem.
I'll do it myself, let's get this background image out first:
then we write HTML:
<div class="cart_btn">
<span><i>155</i></span>
<a href=" dd.html" target="_blank">Go to the shopping cart to checkout</a>
<b></b>
</div>
The span element in the HTML code above is the little red block used to display the number of items in the shopping cart , the a element is a text description, and the b element is the rightmost small triangle.
Let's take a look at the CSS code:
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px solid #eee;padding-left :30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn span{background:url(../images/picA.png) no-repeat -36px -54px;padding-left:7px;position:absolute; top:-12px;left:20px;}
.cart_btn span i{ float:left;height:20px;background:url(../images/picA.png) no-repeat right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px ;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color: transparent transparent transparent #CCCCCC;border-style:dashed dashed dashed solid;border-width:5px;height: 0;overflow: hidden;width: 0;}
In the CSS code above, we use the shopping cart icon as the background of .cart_btn, here We found a problem, that is, there are three icons on the picture. Everyone also found that the three elements I used for icons all use this picture as the background, but the display is different. Here is the background. positioning problem.
Finally, let's take a look at the effect in the browser:
Reference document: https://www.cnblogs.com/heroine/p/5852748.html