Detailed summary of Position

preface

Position plays an important role in CSS layout. I believe you can use position, but do you really understand it? So I took a moment to summarize the commonly used properties of position.

1. Margin and padding

• If there is no position, it is common to use margin and padding to position elements in standard streams. Margin can also be set to a negative number.

• Disadvantages: Setting margin or padding of one element will affect the positioning effect of other elements in the standard stream, which is not convenient to achieve the effect of overlapping elements;

• So what is standard flow? Check out the following article:

  Standard flow and characteristics of off-scale elements

2.CSS positioning property-position

Position can be used to locate elements. There are four commonly used values:

2.1. Static Positioning -static

• Static is the default value of the position property, which is static if the position property is not set.
• Elements are arranged according to a standard flow;
• For static, setting left, right, top, bottom has no effect;

2.2. Relative

• Elements are arranged according to a standard flow;
• The position reference object is the original position of the element, which can be adjusted by left, right, top, and bottom.
• Relative positioning application scenario: The current element position can be fine-tuned without affecting the position of other elements.

2.3. Absolute positioning – Absolute

• Elements are out of the standard flow (de-scaling);
• The location reference object is the ancestor element with the location at the nearest level, which can be adjusted by left, right, top, and bottom.
• If you can’t find a positioned element all the way to the upper element, the final reference object is the viewport.
• An element that has a positioned ancestor: an element whose position is not static;

2.4. Fixed positioning – Fixed

• Elements are out of the standard flow (de-scaling);
• The reference object is the viewport, which can be adjusted by left, right, top, and bottom.
• 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 can be displayed by the browser;
• In general, canvas >= viewport;

3. Absolute positioning skills

3.1. The son is the father

In most cases, the absolute positioning of the child element is relative to the parent element. Although the position of the parent element can be set as relative, absolute and fixed, but if the parent element is not expected to be off scale, the common solutions are as follows:

• Parent element Settingsposition: relative;(Make the parent element a positioning element without leaving the standard flow);
• Child element Settingsposition: absolute;;

3.2. Formula application of absolute positioning elements

• Absolutely positioned element: the element with a position of absolute or fixed, because absolute, without finding the ancestor, also positions with reference to the view-mouth, the same as fixed.

• For absolutely positioned elements, the following two formulas are satisfied:

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

  

• If you want the absolute location element to have the same width and height as the location reference, you can set the following properties for the absolute location element, which is why positioning enables horizontal and vertical center of the box.

  • Left, right, top, bottom all set to 0, margin set to auto;
  • According to the above formula, the actual width occupied by margin + absolute positioning element = the width and height of the positioning reference object, so the box is naturally centered 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;
  }
  Copy the code

  <div class="box">
    <div class="inner"></div>
  </div>
  Copy the code

  • Running results:

    

4. Location of overlapping elements

When positioning elements is added, there may be overlapping of elements, and the sequence of overlapping elements generally meets the following rules:

• Parent-child relationship: Child elements are layered on top of parent elements.

• Non-father-son relationship.

  The element type	Cascading order
  Are non-positioned elements	There is generally no cascade in a standard flow
  One is a positioning element and one is a non-positioning element	Positioned elements are layered on top of non-positioned elements
  It’s all positioning elements	By default, the following positioning elements are stacked on top of the preceding positioning elements, using the CSS property Z-index to control the stacking order

• Z – the index attribute.

  • The z-index attribute is used to set the hierarchy of location elements ** (valid only for location elements, non-static) **. The value can be a positive integer, a negative integer, or 0.
  • Comparison rules:
    • If it is a sibling relationship, the larger the Z-index is, the higher the z-index is, the equal z-index is, and the elements written later are stacked on top of each other.
    • If there is no sibling relationship: compare the two closest locating elements (the sibling relationship) from the element itself and the ancestor element, and the two locating elements must have the specific value of Z-index.

  

5. The position summary