Second understand relative positioning and absolute positioning, "combination fist Relative,absolute" instant awake have wood?

Above: Combo Fist

The hierarchy relationship is:
<div ——————————— position:relative; Not the nearest ancestor-positioning element, not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-position:relative Reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：

To change the effect of the reference (Orange box)
The hierarchy relationship is:
<div ——————————— position:relative; The nearest ancestor-positioning element, reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：

The reference is the top-level element case .
The hierarchy relationship is:
<div ——————————— not set to anchor element, not reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：

This case, the values of Margin-bottom and margin-right no longer affect the elements in the document flow because the element has been detached from the document flow. In addition, regardless of whether its ancestor element is positioned, it is offset from the original position in the document stream. &NBSP;&NBSP;
Figure 9, use the Margin property layout to position elements relative to each other.
hierarchical relationship:
<div ——————————— Position: Relative Not a reference
<div —————————-is not set as a positioning element, not a reference
<div box1
<div box2--–position:absolute; margin-top:50px; MARGIN-LEFT:120PX;
<div box3
:

In the case of IE6, there is no sibling node in front of Box2, then the value of Margin-left appears double margin, as shown in Figure 10.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:60px;
<div Box3
：

Below: Basic understanding

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 document flow, and this time you set the Left,right,bottom for this element, Top these offset properties are not effective and do not take effect, such as a declaration that you set a distance offset of 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 that position:relative block: 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:

I'mWe look at the effect in the browser, we first look at not using absolute positioning when the look:

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:

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 has three icons, we also found that the elements of my three use of the icon are used to do the background of this picture, but the display is not the same, Here is the use of the background we talked about the location of the problem, no friends can be recognized to see the previous 11th , said:CSS Background Properties background details-using background images
what does the content in CSS mean here is not to say, to say the topic is irrelevant, these are basic things, in addition to the CSS triangle, others if not, then you certainly did not take a good look at the previous article. Besides, if you don't know anything, you can check the reference manual .
Finally, let's look at the effect in the browser:

Second understand relative positioning and absolute positioning, "combination fist Relative,absolute" instant awake have wood?