In-depth understanding and application of Position, in-depth understanding of position

In-depth understanding and application of Position, in-depth understanding of position

Position is commonly known as positioning. Its main values and functions are as follows:

Static	Default value. Not located. It appears in normal Document Stream
Absolute	Absolute positioning, relative to the first parent element with position absolute, relative, and fixed
Relative	Relative positioning, relative to its normal location
Fixed	Absolute positioning, relative to browser window Positioning

Position is not complex and confusing applications are difficult to understand. The main rules are as follows:

Document Stream Separation

In addition to the static property value, other values will disallow elements from the document stream (float will also lead to elements from the Document Stream ).

Influence on Width and height

1) The reference point of Absolute is the parent element (position is the element of absolute, relative, and fixed) that can be used as the reference point. the browser window of fixed and the reference point of relative are the normal position of the element.

2) When the element value is inherit

A) when the Width and height values of the parent element are numerical values, the element inherits the complete height of the parent element and uses the recent reference point as the reference.

.wrap{            position: relative;            width: 500px;            height: 300px;            border: 1px solid red;        }        .cont{            background: gray;            width: 150px;            overflow: hidden;        }        .txt{            background: yellow;            width: 230px;            height: inherit;        }        .banner{            background: pink;            width: 50%;            height: inherit;        }        .txt-cont{            position: absolute;            background: darkblue;            width: inherit;            color: white;        }

<div class="wrap">        <div class="cont">            cont            <div class="txt">                txtxtxt                <div class="txt-cont">                    txt-cont                </div>            </div>            <div class="banner">                banner            </div>        </div></div>

B) when the Width and height values of the parent element are percentages, the X percentage is calculated based on the Width and height of the reference element.

.wrap{            position: relative;            width: 500px;            height: 300px;            border: 1px solid red;        }        .cont{            background: gray;            width: 150px;            overflow: hidden;        }        .txt{            background: yellow;            width: 50%;            height: inherit;        }        .banner{            background: pink;            width: 50%;            height: inherit;        }        .txt-cont{            position: absolute;            background: darkblue;            width: inherit;            color: white;        }

<div class="wrap">        <div class="cont">            cont            <div class="txt">                txt                <div class="txt-cont">                    txt-cont                </div>            </div>            <div class="banner">                banner            </div>        </div></div>

 

3) When the element itself is a percentage (50%)

In this case, no matter whether the width and height of the parent element are numeric or the percentage does not affect the element itself, the element itself will be calculated based on reference.

.wrap{            position: relative;            width: 500px;            height: 300px;            border: 1px solid red;        }        .cont{            background: gray;            width: 150px;            overflow: hidden;        }        .txt{            background: yellow;            width: 50%;            height: inherit;        }        .banner{            background: pink;            width: 50%;            height: inherit;        }        .txt-cont{            position: absolute;            background: darkblue;            width: 100%;            color: white;        }

<div class="wrap">        <div class="cont">            cont            <div class="txt">                txt                <div class="txt-cont">                    txt-cont                </div>            </div>            <div class="banner">                banner            </div>        </div></div>

Default position after Positioning

The default positions after the Fixed and absolute attributes are both in the same place, but the elements of the normal Document Stream will come to the top, and will be covered by the positioning element.

It has no undefined relationship with z-index.

For a detailed introduction to z-index, see the following chapter. This section only specifies that the position creates a cascading context except the static value (when z-index is not auto ).

1) when z-index is a numerical value, the stack context is created, and the subelement stack sequence is used as a reference.

2) When z-index is auto, the stack context is not created. The stack order is the same as that of z-index: 0.