Detailed explanation of relative and absolute positioning of CSS, detailed explanation of CSS positioning and positioning

Detailed explanation of relative and absolute positioning of CSS, detailed explanation of CSS positioning and positioning
Original article address: http://www.3lian.com/edu/2015/01-31/191131.html csscssand absolute positioning thanks to 3lian8 delivery time: Source: cmsgood zcp

 

Relative and absolute positioning of CSS
Normally, the position attribute value of our element is static by default, which means there is no positioning. The element appears in the normal Document Stream. At this time, you set left, right, bottom and top offset attributes have no effect and will not take effect. For example, if you set a declaration that is PX away from the left offset: left: Px, this declaration will not take any effect. The z-index attribute does not take effect at this time.
That is to say, if we do not give a position attribute declaration to an element at ordinary times, it defaults to the above situation, but because of the floating, therefore, we usually do not need to set the position attribute for the element!
However, in some special cases, we have to use the position attribute. Today we will talk about the relative and absolute values of the position attribute.
First, relative, relative positioning.
How can this problem be solved? If I have set relative positioning for an element, the element will first appear in the document stream in the same way as other elements. Then, we can set its horizontal or vertical offset to move this element relative to its starting point in the Document Stream. Note that when relative positioning is used, even if the element is offset, it still occupies the space before the offset. It is worth noting that the offset is not a margin, but is different from the margin.
Let's take a look:

There are three floating blocks, and the second is set with the relative position: relative. At this time, we can see that its position is no different, it is in the normal document stream like the other two blocks.
Next I will set an offset for the position: relative block: left: 50px; top: 30px. Then let's look at the effect:

At this time, we found that the second block has an offset for the starting point of its own position, but the space occupied by the second block is still there (the location marked by the dotted box ), even if we set the offset to a greater value so that it completely leaves the original position, its original position in the Document Stream will still exist and will not be filled by the third floating block.
At the same time, its offset will not squeeze other parts from the original position in the Document Stream. If there is overlap, it will overlap on other Document Stream elements, rather than squeeze them out, as shown in the figure, it has already covered the third block.
We can set its z-index attribute to adjust its stack order.
Next let's take a look at the absolute position: absolute
An element with absolute positioning is not occupying space in the Document Stream. If an element is set with absolute positioning, its position in the Document Stream will be deleted, where does this element go? It float. In fact, when relative is set, this element will also float, but their difference is that, relative positioning does not delete the space occupied by the element in the Document Stream, while absolute positioning deletes the position of the element in the Document Stream, we can use z-index to set the stacking order of the file streams.
So how is absolute positioning located? First, if its parent element has a location other than static, such as position: relative, or position: absolute and position: fixed, it will be located relative to its parent element, and its position is specified through the left, top, right, and bottom attributes. If its parent element is not positioned, it depends on whether the parent element of its parent element has a set position. If it still does not exist, it continues to move to the higher-level ancestor element and so on, in short, its positioning is relative to the first ancestor element that has been set apart from static positioning (such as position: relative, if none of the above three types of positioning are located, then it is relativePosition the document body (instead of a window, fixed relative to the window)[Note the differences between the two,You can see from the bottom picture that the red border is the border of the window body,The purple background color is part of the document body]

The absolute positioning element is relative to the person who locates the object. We will refer to the "who" as a reference object. We will see it in the light of the above explanation:

Let's take a look at the effect in the browser. Let's first look at what it looks like when no absolute positioning is used:

 
Then we set the absolute position: absolute for the second block, and then set another offset: left: 150px; top: 40px; then it becomes as follows:

Another point is: when setting the offset, we can set a negative value.
Now that we understand relative positioning and absolute positioning, how can we apply them to actual cases?
First, let's take a look:

There is a red small block in the upper-left corner of the "go to shopping cart settlement" button in the ", which is used to display several items in the shopping cart. You may not know how to implement the red block before learning to locate it, but now I have learned the absolute positioning, and this problem is no longer a problem.
Let me do it myself. Let's get the background image first:

Then we write HTML:

 
155
Go to shopping cart for settlement

 

The span element in the preceding HTML code is the small red block used to display the number of items in the shopping cart. Element a contains a text description and Element B is the rightmost 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 # CCCCCC; border-style: dashed solid; border-width: 5px; height: 0; overflow: hidden; width: 0 ;}
In the above CSS code, we use the shopping cart icon. the background of cart_btn. Here we found a problem, that is, there are three icons on that image. We also found that the elements of the three icons I used are all using this image as the background, however, the display is different. Here we use the background to locate the problem. If you don't know how to identify the problem, you can refer to the previous article 11th:Css background attribute background-background image
What is the meaning of the content in CSS? I will not talk about it here. If I want to talk about it, I will leave the question. These are basic things. Except for the CSS triangle, none of the other things will be done, then you certainly have no good looks at the previous articles. If you really don't understand it, you can check the reference manual.
Finally, let's take a look at the effect in the browser:

Absolute positioning is relative to the document body (not a window, instead of a window positioning is fixed) [note the difference between the two. You can refer to a figure where the red border is the border of the window body, the purple background color is part of the document body]