Positioning of CSS

There are three kinds of positioning, respectively, relative positioning position:relative; , absolute positioning Position:absolute; , fixed positioning position:fixed;

Relative positioning

Relative positioning, is to fine-tune the position of the element, so that the element relative to its original position, the position adjustment. In other words, if a box wants to be adjusted, then it should use relative positioning

Do not take off the mark, the original position also occupies, will act separation

Relative positioning does not take off the mark, the real position is in the original position, but the shadow out, can float around.

Relative positioning uses

Relative positioning has a pit, so generally not used to do "gland" effect. page, the effect is minimal. On two functions:

1) fine-tuning elements

2) Do the absolute positioning of the reference, the son of the father phase

The left and right can be used to describe the movement of the box, and the bottom and top of the box can be described by top and bottom.

Method of implementation:

Method 1:position:relative;top:100px;left:200px; Method 2:position:relative;bottom:-100px;right:-200px; Method 3:position: relative;top:100px;right:-200px; method 4:position:relative;bottom:-100px;left:200px;

Absolute positioning

Absolute positioning is more flexible than relative positioning

Absolute positioning off-label

The absolutely positioned box is out of standard document flow. Therefore, the nature of all the standard document streams, absolutely positioned after the non-compliance. After absolute positioning, the label will not distinguish between the so-called inline elements, block-level elements, do not need to display:block, you can set the width, height.

Reference points

Absolute positioning of the reference point, if the top description, then the positioning reference point is the upper left corner of the page, not the upper left corner of the browser:

If using bottom description, then is the browser first screen window size, corresponding to the lower left corner of the page:

Take the box as a reference point

An absolutely positioned element, if the parent element is also positioned in the element, then the parent element, as the reference point.

To listen to the nearest already positioned ancestor element, not necessarily the father, may be grandpa:

      →  relative positioning          →  no positioning            
         → Absolute positioning, will be box1 for reference, because Box2 no positioning, Box1 is the most recent father element                      →  relative positioning          → relative positioning            
         → Absolute positioning, will be box2 as the reference, because Box2 is his own recent parental elements            

is not necessarily relative positioning, any positioning, can be used as a reference point

  → Absolute positioning        
  → Absolute positioning, with Div as the reference point. Because the father was in position.

The son of the father, the son of the father, the son of the father, all can be positioned for their sons. However, the project on the son absolutely, father absolutely, there is no box in the standard flow inside, so the page is not stable, there is no practical use. Engineering, "The son of the father" has meaning, the father did not take off the mark, the son in the scope of the father moved.

          → absolute positioning          → relative positioning          → no positioning            
         → Absolute positioning, with Box2 as the reference location.            

Absolutely positioned son, ignoring the reference to the padding of that box.

    
 
      Document                Word, word, word, character, word, word, word, word, word, word, word, word, word, word, word, word, word, word, word, word, word, word, word, word        
    

Absolute positioning of the box centered

After absolute positioning, all standard flow rules are not applicable. So margin:0 Auto; Failure. Absolute positioning of the box center, just left:50%; Margin-left: Half the width of the negative.

    
 
      Document        

Fixed positioning

Fixed positioning is relative to the browser window positioning. How the page scrolls, the box shows the position unchanged, fixed positioning off the mark.

Z-index

The Z-index value indicates who is pressing. The numerical value is large and the gland is small.

1) Only the elements that are positioned can have a z-index value. In other words, z-index values can be used regardless of relative positioning, absolute positioning, fixed positioning. and floating things can not be used.

2) The Z-index value has no unit, which is a positive integer. The default Z-index value is 0.

3) If everyone has no z-index value, or Z-index value, then who writes behind HTML, who can hold someone on top. Positioned elements that are always able to crush elements that are not positioned.

4) The z-index of the parent element is small, and the z-index of the child element is useless.

