Deep understanding and application of position

Position commonly known as positioning, the main value and function as follows:

Position is not complex, confusing application is difficult to understand, the main rules are as follows:

Out of document Flow

In addition to the static property value, other values leave the element out of the document flow (float also causes the element to detach from the document stream).

Effect on Width and height

1) The reference point of the absolute is the closest parent element (position to absolute, relative, fixed element), the fixed Reference Point browser window, and the relative reference point as the element's normal position.

2) When the element itself value is inherit

A) when the width and height values of the parent element are numeric, the element inherits the full height of the parent element and is referenced with the nearest reference point.

. 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;        }

                    Cont                            txtxtxt                                    txt-cont                                                        Banner                    

b) When the width and height values of the parent element are percentages, the width, height * Percentage of the reference point element is calculated.

. 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;        }

                    Cont                            txt                                    txt-cont                                                        Banner                    

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

In this case, regardless of whether the width and height of the parent element are numeric or percentages do not affect the element itself, the element itself is calculated as a 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;        }

                    Cont                            txt                                    txt-cont                                                        Banner                    

The default location after positioning

The default position after the fixed and absolute properties is in place, just immediately following the normal document flow element will be on top, covered by the positioned element.

He had no solution to Z-index's relationship.

A detailed introduction to Z-index is shown in the following section, where only the position is created in addition to the static value (Z-index is not auto).

1) When the Z-index is numeric, a cascading context is created, and the child elements cascade order as a reference.

2) When Z-index is auto, cascading contexts are not created and the stacking order is consistent with z-index:0.

