CSS positioning examples explained

This article mainly introduces to you the CSS positioning tutorial. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Document flow

Simply put, it is the process of determining the arrangement of elements according to their position in HTML. The layout mechanism of HTML uses the document flow model, that is, block elements occupy one line, and inline elements do not occupy one line.

Generally, margin is used to separate elements from each other; padding is used to separate elements from content. Margin is used for layout to separate elements so that elements are independent of each other; padding is used for the space between elements and content to allow a "distance" between content (text) and (wrapped) elements. As long as it is not laid out in float or absolute positioning, it will be in the document flow.

2. Position attribute introduction

1. static, default value. An element whose position is set to static will always be at the position given by the document flow.

2. inherit specifies that the value of the position attribute should be inherited from the parent element. However, any version of Internet Explorer (including IE8) does not support the attribute value "inherit".

3. fixed, generates absolutely positioned elements. By default, you can position at specified coordinates relative to the browser window.

4. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. The element will stay in that position whether the window is scrolled or not. But when the ancestor element has a transform attribute and is not none, the coordinates are specified relative to the ancestor element, not the browser window.

5. absolute, generates an absolutely positioned element, positioned relative to the nearest positioned ancestor element to the element.

6. The position of this element can be specified through the "left", "top", "right" and "bottom" attributes.

7. relative, generates a relatively positioned element, positioned relative to the element's initial position in the document.

8. Set the offset of this element relative to its own position through the "left", "top", "right" and "bottom" attributes.

3. Relative positioning

relative generates a relatively positioned element, positioned relative to its normal position.

The process of relative positioning is as follows:

Generate an element in the default way (static) (and the element floats like a layer). Relative to the previous position movement, the direction and magnitude of the movement are determined by the left, right, top, and bottom attributes. The position before the offset remains unchanged.

  <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>
  <p id="box1"></p>
  <p id="box2"></p>

Before the comment code in box2 takes effect, it is sorted and presented according to the document flow.

However, when the comment code is uncommented and takes effect, it will move relative to the position where it should be presented in the document flow.

So, the reference object of relative positioning is itself.

4. Absolute positioning

The big difference between absolute positioning and relative positioning is that when we set an element to absolute positioning, then the element will Out of the document flow, other elements will assume that the element does not exist in the document flow and fill its original position. An absolutely positioned element moves its position based on its reference, which is determined by the positioning settings of its ancestor element.

The so-called determination based on the positioning settings of its ancestor elements is simply understood as: relative to the nearest positioned ancestor element of the element, if there is no ancestor element with positioning set, then the reference object is the body layer.

1. Use absolute when the ancestor element is not positioned. In this case, the reference is the body.

2. Ancestor elements have positioning. As long as the ancestor element is set to a value other than position:static, it is regarded as having positioning, and the nearest ancestor element will be set to absolute positioning. A reference to the element. In this case, the reference is the nearest ancestor element.

3. When left/right and top/bottom are not set, the position of the absolute element is the position of the element in the document flow

Related recommendations:

Some research on Positoin, absolute, and Relative in CSS positioning

Analysis of CSS positioning position and application scenario examples

10 recommended courses on CSS positioning

The above is the detailed content of CSS positioning examples explained. For more information, please follow other related articles on the PHP Chinese website!