CSS's four layout levels and HTML tags of the ' ecosystem ' (d)------positioning layer

Positioning layer, in some cases, elements are randomly placed, in the document layer and floating layer layout is far from enough to meet the requirements, then we will use the positioning properties.

In the General page, the commonly used positioning has three kinds of ----relative positioning, absolute positioning, fixed positioning. Let's take a look at these three kinds of positioning.

Relative positioning (position:relative;), when an element has relative positioning, the element will be able to set the following five properties, that is, top, left, right,bottom,z-index, After four direction attribute is set, you can change the position of the element, respectively, according to the element itself of the four edges to locate, but the element in the original place of the page also occupy position (whether the document layer or floating layer can occupy position),Z-index is a hierarchical attribute, set, will be in the A level adjustment is made in the z-axis, and when two elements overlap, the high level overrides the lower-level elements. PS: Because it occupies position in the original level after positioning, it is generally not used relative positioning to change the position of the element, only used to adjust the level or with absolute positioning.

Absolute positioning (position:absolute;), as with relative positioning, the element will be able to set the following five properties, namely top, left, right,bottom,z-index, but except z-index usage is identical, the remaining four attributes are changed when positioned.

I summarize the following three articles:

First, see if its parent element has a positional property, and if so, it is positioned according to the four edges of its parent element, if not, see article Ii.

Second, see if the parent element of its parent element has a positional property, and if so, it is positioned according to the four edges of the parent element of its parent element, if not, see article Iii.

Third to first level up, if you find a parent element has a positional property, according to the parent element of the four edge positioning, if not, according to the first screen of the browser four edge to locate.

PS: In general, when you need to move a position, you use absolute positioning to move the location, but often need to add the parent element to use the positioning property, as for the positioning property to add which value, depending on the page.

Fixed positioning (position:fixed;), the same as the previous two, the element will be able to set the following five properties, that is, top, left, right,bottom,z-index, but except Z-index usage is identical, the rest of the four properties in the positioning, the basis has also changed.

Since fixed positioning, the element will always be on the page we can see the area, that is, the element will scroll with the scroll bar scrolling, so the fixed positioning of the four positioning properties after assignment, based on the browser's four edges to locate.

CSS's four layout levels and HTML tags of the ' ecosystem ' (d)------positioning layer