Detailed CSS relative positioning and absolute positioning

Relative positioning and absolute positioning of CSS
Typically, the value of our element's position property defaults to static or no positioning, and the element appears in the normal flow of the document, and the left,right,bottom,top that you set for this element are not effective and will not take effect. For example, you set a declaration that offsets 100px from the left margin: left:100px then this statement will not have any effect. There are also z-index properties that do not take effect at this point.
In other words, if we do not give an element a position attribute declaration, then it defaults to the above situation, but because of the float, so usually we do not need to set the element position property!
But in some special cases, we have to use the position attribute, so let's talk about the relative and absolute values of the Position property today.
First say relative, relative positioning.
How do you understand it? If I set a relative position on an element, then first this element will appear in the document flow like other elements, where it should appear, and then we can set its horizontal or vertical offset to move the element relative to the starting point of its position in the document flow. One thing to note is that when using relative positioning, even if the element is offset, he still occupies the space before it is offset. One thing to note here is that the offset is not a margin and is not the same as the margin.
Let's look first:

There are three floating blocks, the second block is set relative positioning position:relative, when you see its location and no other difference, with the other two blocks are in the normal flow of the document.
Next I set an offset for the block that set the position:relative: left:50px; top:30px then we look at the effect:

At this point we find that the second block has an offset to the starting point of its own position, but the space occupied by it is still in place (where the dotted box is marked), even if we set the offset a bit larger so that it completely leaves the original position, where it will still exist in the document stream. Will not be filled by the third block floating around.
At the same time, its offset does not squeeze other blocks from the original position in the document stream, and if there is overlap, it overlaps the other document flow elements, rather than squeezing them out, as shown in the figure, which is covered by the third block.
We can set its Z-index property to adjust its stacking order.
Next we'll look at absolute positioning: position:absolute
An absolutely positioned element is not occupied in the document flow, and if an element has an absolute position set, its position in the document flow is deleted, where is this element? It floats, actually setting the relative positioning relative will also let the element float up, but their difference is that the relative positioning does not delete itself in the document flow occupies the space, and absolute positioning will delete the element in the document flow position, completely from the document flow out of the, We can set their stacking order by Z-index.
So how does absolute positioning work? First, if its parent element sets a location other than static, such as position:relative, or Position:absolute and position:fixed, then it will be positioned relative to its parent element, with the position passed to the left, Top, right, the bottom property specifies that if its parent element is not positioned, then it depends on whether the parent element of the parent element has a set orientation, and if it does not continue to the ancestor elements of higher levels, In short, it is positioned relative to the first ancestor element that sets a location other than static positioning (such as position:relative), and if all ancestor elements do not have one of the above three positions, then it is positioned relative to the body of the document (not a window, Fixed with respect to window positioning)
The absolute positioning of the elements relative to who to locate, we put this "who" called the reference, we combined the above explanation to see the understanding:

Let's take a look at the effect in the browser, and let's look at the look without using absolute positioning:

Then we set the absolute positioning of the second block: Position:absolute and then set an offset: left:150px;top:40px; Then it becomes the following:

One more thing: we can set a negative value when we set the offset.
Well, since we understand relative positioning and absolute positioning, how should we apply them to real-world cases?
First, let's take a look:

In the Go Shopping cart settlement button in the upper left there is a small red block, used to show a few items in the shopping cart, you may not learn the absolute positioning before the how to realize the red piece, but now just learned the absolute positioning, the problem is no longer a problem.
I'm going to do it myself, let's get this background picture out:

Then we write HTML:
<div class= "CART_BTN" >

<span><i>155</i></span>
<a href= "dd.html" target= "_blank" > go shopping Cart settlement </a>
<b></b>

</div>
The span element in the above HTML code is the small red block that is used to display the number of items in the shopping cart, the text description in the A element, and the B element is the right-most 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;p Adding-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 above CSS code we put the shopping cart icon as the. CART_BTN background, here we find a problem, is that a picture there are three icons, we also found that the elements of my three use the icon is used to do the background of the picture, but the display is not the same, here is used to the background positioning problem.
Finally, let's look at the effect in the browser:

Detailed CSS relative positioning and absolute positioning