HTML+CSS Learning notes 4[positioning]

How to make the div2 in Figure 1 move to the position on the 2;

Idea: Which CSS commands can affect the location of the box display?

Relative relative positioning/positioning offset

position:relative; Relative positioning
A, does not affect the characteristics of the elements themselves;
b, do not leave the element out of the document flow;
C, if there is no positioning offset, the element itself has no effect;

Positioning element Position Control
Top/right/bottom/left The offset of the positioned element.
Absolute absolute positioning/positioning level

Osition:absolute; Absolute positioning
A, leaving the element completely out of the document flow;
b, so that the embedded support wide high;
C, block attribute tag content open width;
D, if there is an offset from the positioned parent relative to the anchor parent, there is no positioning parent offset from the entire document;
E, relative positioning is generally used in conjunction with absolute positioning elements;

Z-index:[number]; positioning hierarchy
A, positioning element by default the latter level is higher than the former;

To be resolved: out of text flow seemingly margin0 auto failure reason is what closed floating and so on

Mask Filter/fixed positioning

Mask pop-up window (Youku pop-up window)
Standard opacity: opacity:0~1;
IE Filter: Filter:alpha (opacity=0~100);

position:fixed; fixed positioning
With the absolute positioning of the characteristics of the basic consistent, the difference is always relative to the entire document positioning;
Problem: IE6 does not support fixed positioning;

To locate other values:
position:static; default value
Position:inherit; Inherit the value of an anchor property from a parent element

position:relative | Absolute | Fixed | static | Inherit

positioning compatibility issues, clear float method

position:relative;
The Overflow:hidden of the parent under the IE6; The relative of the child is not covered;

Position:absolute;
The parent width of the anchored element under IE6 is odd, so both right and bottom of the positioned element under IE6 have a 1-pixel bias.

Position:absolute; The floating of the absolute positioning element children can be used without the method of writing the float;

position:fixed; The floating of fixed positioning element children can be used without writing the floating method; (IE6 incompatible)