Detailed summary of position positioning

Position Positioning detailed summary

1.margin、padding location

• without position, In standard flow , Use margin、padding Positioning elements is common , among margin You can also set negative numbers ;

• shortcoming ： Set the... Of an element margin or padding, It usually affects the positioning effect of other elements in the standard flow , It is not convenient to realize the cascading effect of elements ;

• So what is standard flow ？ You can refer to the following article ：

  Characteristics of standard flow and off standard elements

2.CSS Location attribute -position

utilize position You can position elements , Commonly used values are 4 individual ：

2.1. Static positioning -static

• static by position Default value of property , Don't set position Property is static;
• Elements are arranged according to the standard flow ;
• about static, Set up left、right、top、bottom There is no effect ;

2.2. Relative positioning -relative

• Elements are arranged according to the standard flow ;
• The positioning reference object is the original position of the element itself , Can pass left、right、top、bottom To adjust the position ;
• Relative positioning application scenarios ： Without affecting the position of other elements , Sure Fine tune the current element position ;

2.3. Absolute positioning -absolute

• Element out of standard flow （ De labeling ）;
• The positioning reference object is the nearest ancestor element with positioning , Can pass left、right、top、bottom To adjust the position ;
• If you go all the way to the upper element and can't find the element with location , Then the final reference object is the viewport ;
• Ancestor element with location ：position The value of the static The elements of ;

2.4. Fixed position -fixed

• Element out of standard flow （ De labeling ）;
• The positioning reference object is the viewport （viewport）, Can pass left、right、top、bottom To adjust the position ;
• When the canvas scrolls , The position of the element is fixed ;

Canvas and viewport ：

• canvas ： The size of the entire web page ;
• viewport ： The area that the browser can display ;
• In general , canvas >= viewport ;

3. Absolute positioning skills

3.1. The son is the father

In the vast majority of cases , The absolute positioning of child elements is relative to the parent element , Although for the parent element position Set up relative、absolute、fixed Fine , But if you don't want the parent element to be unmarked , The common solution is ：

• Parent element Settings position: relative;（ Let the parent element be the positioning element , Without departing from the standard flow ）;
• Child element settings position: absolute;;

3.2. The formula application of absolute positioning elements

• Absolute positioning elements （absolutely positioned element）：position The value is absolute perhaps fixed The elements of , because absolute When the ancestor locating element is not found , It is also positioned with reference to the viewport , and fixed The effect is the same .

• For the element of absolute positioning , Will satisfy the following two formulas ：

  • Position the width of the reference object = left + right + margin-left + margin-right + The actual width occupied by the absolute positioning element ;
  • Position the height of the reference object = top + bottom + margin-top + margin-bottom + The actual height occupied by the absolute positioning element ;

  

• If you want to absolutely position the width and height of an element as you want to position a reference object , You can set the following properties to the absolute positioning element , This is why positioning enables the horizontal and vertical centering of the box .

  • left、right、top、bottom All set to 0,margin Set to auto;
  • According to the formula above ,margin + The absolute positioning element actually occupies the width and height = Locate the width and height of the reference object , The box is naturally displayed horizontally and vertically
  • Sample code ：

  .box {
        
    position: relative;
    width: 500px;
    height: 300px;
    background-color: red;
  }
  
  .inner {
        
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  

  <div class="box">
    <div class="inner"></div>
  </div>
  

  • Running results ：

  

4. The stacking phenomenon of positioning elements

Add positioning to elements , There may be a cascade of elements , The sequence of stacking generally meets the following rules ：

• Father and son ： The child element will be cascaded on the parent element .

• It's not a father son relationship .

  Element type	Cascade order
  Are non positional elements	Generally, there is no stacking phenomenon in the standard flow
  1 One is the positioning element ,1 Is a non positional element	Positioning elements are superimposed on non positioning elements
  Are positioning elements	By default, the following positioning elements are stacked on the previous positioning elements , Use css attribute z-index To control the stacking order

• z-index attribute .

  • z-index Property is used to set Positioning elements The stacking order of **（ Valid only for positioning elements , Not static）**, The value can be a positive integer 、 Negtive integer 、0;
  • Compare the rules ：
    • If it's a brotherhood ：z-index The bigger it is , Stacked on top ,z-index equal , The elements written at the back are stacked on top ;
    • If it's not brotherhood ： From the element itself and from the ancestor element , find Nearest neighbor （ Brotherhood ） Of 2 Positioning elements Compare , And in 2 A positioning element must have settings z-index The specific value of ;

  

5.position summary

position Value	Out of the standard stream	Positioning elements	Absolute positioning elements	Locate the reference object
static	no	no	no	No,
relative	no	yes	no	The original position of the element itself
absolute	yes	yes	yes	The nearest level has an ancestor element of the location （ If you can't find it , Take the viewport as the reference object ）
fixed	yes	yes	yes	viewport