Recently I learned CSS related knowledge, positioning is one of the difficulties. You don’t know the details, and sometimes you make a mess when you use it. This article sort out the specific understanding and application of positioning attributes.

A list,

1. The document flow

Before introducing Postion, it’s important to understand document flow.

Simply put, it is the process of arranging elements according to the order in which they are placed in the HTML. The layout mechanism of HTML is based on the document flow model, that is, block elements occupy a row, inline elements do not occupy a row.

Margin is usually used to separate elements from each other. Padding is used to separate elements from content. Margin is used to separate elements and make them irrelevant to each other. Padding is used to separate elements from content, so that there is a “distance” between the content (text) and the element (wrapping).

As long as it’s not float and absolutely positioned, it’s in the document flow.

The performance is as follows:

    <div style="border:1px solid black">div1</div>
    <div style="border:1px solid red">div2</div> This is a picture <img SRC ="test.png">Copy the code

2. Position property introduction

  • Static, default value. An element whose position is set to static will always be in the position given by the document flow.
  • Inherit, stating that the value of the position property should be inherited from the parent element. However, the property value inherit is not supported in any version of Internet Explorer (including Internet Explorer 8).
  • Fixed, generates an absolutely positioned element. By default, it can be positioned at the specified coordinates relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. The element remains in that position whether the window scrolls or not. But when the ancestor element has the transform attribute and is not None, coordinates are specified relative to the ancestor element, not the browser window.
  • Absolute, an element that generates an absolute position relative to the element’s nearest located ancestor. The position of this element can be specified by the “left”, “top”, “right”, and “bottom” attributes.
  • Relative, generates an element that is positioned relative to its initial position in the document. Sets the offset of this element relative to its position with the “left”, “top”, “right”, and “bottom” attributes.

No matter what kind of positioning, there must be a reference. Finding the right reference is half the battle.

Two, relative positioning

Relative Generates an element that is positioned relative to its normal position.

The relative positioning process is as follows:

  • An element is generated by default (static) (and the element floats like a layer).
  • Relative to the previous position, the direction and magnitude of the move are determined by the left, right, top, and bottom attributes, and the position before the offset remains unchanged.

The instance

<style type="text/css">
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {margin: 20px; width: 200px; height: 200px; background-color: red; /*position: relative; left: 100px; top: 100px; */ } </style> <div id="box1"></div>
    <div id="box2"></div>Copy the code

The comment code in Box2 is presented sorted by document flow before it takes effect.







Therefore, the relative reference is itself.

Three, absolute positioning

One of the big differences between absolute and relative positioning is that when we set an element to absolute positioning, the element will be removed from the document flow, and other elements will assume that the element does not exist in the document flow and fill in its original position. An absolute location element moves itself according to its reference, which in turn needs to be determined according to the location Settings of its ancestor element.

If no ancestor element is positioned relative to the element’s closest positioned ancestor element, then the reference is the body layer.

The instance

The graph above illustrates the feature of absolute positioning. You can see that the innermost layer is two boxes, and the outer layer is nested with two layers of ancestor elements.

1. Ancestor elements are not located

Absolute is used when the ancestor element is not located.

#box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 30px;
        }Copy the code



In this case, the reference is the body.

2. Ancestor elements have location

Any ancestor element with a value other than position:static is considered positioned, and the nearest ancestor element is set to the absolute position element’s reference.

#orange {
            width: 400px;
            height: 400px;
            background-color: orange;
            position: absolute;


        }
        #box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 220px;
        }Copy the code



In this case, the reference is the closest ancestral element.

In addition to the above two cases, the corresponding reference will change if the user does not set left/right and top/bottom for the absolute element.

3. Left/Right and top/bottom are not configured

The position of the absolute element is the position of the element in the document flow without setting left/right and top/bottom

#box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
        }Copy the code


Four,

Mainly introduces the relative positioning and absolute positioning, other positioning is relatively simple, try to know. In addition, the application of relative positioning and absolute positioning is flexible, suitable for a variety of scenarios.