A detailed analysis of the positioning of the CSS box model

cssBox model Positioning

1, Static Positioning

## The default value for #HTML elements is that there is no positioning and the element appears in the normal flow.
Static positioned elements will not be affected by top, bottom, left, right.

2. Fixed positioning

The position of the element is a fixed position relative to the browser window.

It does not move even if the window is scrolled:

Fixed positioning makes the element's position independent of the document flow, so it does not occupy space.

Fixed positioned elements overlap with other elements.

3. Relative positioning

The positioning of a relatively positioned element is relative to its normal position.

The content of relatively positioned elements that can be moved and elements that overlap each other will not change the space they originally occupy.

Relatively positioned elements are often used as container blocks for

absolutely positioned elements.

4. Absolute positioning

The position of an absolutely positioned element is relative to the nearest positioned parent element. If the element has no positioned parent element, then its position is Relative to:

Absolutely positioning positions the element independently of the document flow, so it doesn't take up space.

Absolutely positioned elements overlap with other elements.

Overlapping elements

Elements are positioned independently of the document flow, so they can cover
other elements on the page
z-index Attribute specifies the stacking order of an element (which element should be in front, or behind) An element can have a positive or negative stacking order:
Elements with a higher stacking order are always in The front of lower stacking order elements.
Note: If two positioned elements overlap and z-index is not specified, the element last positioned in the HTML code will be displayed first.

The difference between relative and absolute positioning

Absolute positioning (absolute):

1. The
object that will be assigned this positioning methodfrom Drag it out of the document flow and use left, right, top, bottom and other attributes to perform absolute positioning relative to its closest parent object with the most positioning settings. If the object's parent does not set positioning attributes, it still follows HTML positioning. If it is regular, it will be positioned based on the upper left corner of the body object as a reference. 2. Absolutely positioned objects can be stacked, and the stacking order can be controlled through the z-index attribute. The z-index value is a unitless
integer, with the larger one on top and can have negative values. Relative to the nearest non-standard stream positioning, the original position disappears and is replaced by the subsequent position

Relative positioning (relative):

Relative to the original position, but the original position is still retained .
Objects cannot be stacked, and their positions are offset in the normal document flow according to left, right, top, bottom and other attributes.
You can also use z-index hierarchical design.

[Tutorial] Thoroughly understand CSS box mode four (absolute positioning and relative positioning)

Example:

<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*多个标签同时设置，使用逗号分隔*/
        body, p, ul, li, img, a {
            margin: 0;
            padding: 0;
        }

        /*给定图片尺寸：否则会超出父容器，堆叠在一起*/
        img {
            width: 100%;
            height: 100%
        }

        /*让a标签绝对于li标签，li要设置relative*/
        li {
            list-style: none;
            position: relative;
            float: left;
            padding: 1%;
            width: 18%;
        }

        /*让删除红叉处于li的右上角，且需给定大小*/
        a {
            background: url(images/close.png);
            width: 16px;
            height: 16px;
            position: absolute;
            top: 0;
            right: 0;
        }</style>

Rendering:

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