Recently, I found that the layout is often biased by position caused by multi-layer positioning, especially in the position: relative condition, the original position is still occupied, which is easy to ignore. So make a note of this (although this knowledge is very basic)!

Absolute positioning, relative positioning

position: absolute

  • Absolute position is based on the origin of the upper-left corner of the parent element. Absolute will drag the object out of the normal document flow absolute position regardless of the layout of the content around it.
  • If other objects with different Z-index attributes already occupy a given position, they do not affect each other, but overlap in the same position.
  • If the parent (infinite) does not have a position attribute, the current absolute is positioned with the TRBL attribute in the upper left corner of the browser as the original point.
  • If the parent (infinite) sets the position attribute, the current absolute is positioned with the parent (nearest) upper left corner as the original point in combination with the TRBL attribute.

Tips:

  • To enable absolute positioning of an object, you must specify at least one of the left, right, top, and bottom properties and set this property to absolute. Otherwise, the above attributes will use their default value auto, which will cause the object to follow normal HTML layout rules and be rendered immediately after the previous object.
  • The TRBL attribute (TOP, RIGHT, BOTTOM, LEFT) is valid only when position is set. Position: relative is also valid.

position:relative

  • Relative positioning is offset relative to its initial position. When setting position: Relative is positioned with reference to the upper-left corner of the parent’s (most recent) content area as the original point combined with the TRBL attribute (or offset from the last element in the parent content area of the located element). Non-parent is positioned with the upper-left corner of the BODY as the original point.
  • Relative positioning is not superimposed. When relative positioning is used, elements still occupy the same space regardless of whether they are moved or not (the following example illustrates this if confusing). Therefore, moving an element causes it to overwrite other boxes.
<! </title> </head> <body> <div style="border-style: solid; border-color: red; height: 500px; width: 100%;" > <div style="height:100%; background-color:yellow; position: absolute; top:50px; left:50px;" "> <div style=" color: RGB (0, 0, 0); background-color: green;" "> <div style=" color: RGB (0, 0, 0); background-color: blue"></div> </div> </body> </html>Copy the code

-w710

At this point we increment in the “relative div”position: relative; top:300px;, the effect is as follows:

conclusion

Layer cover order from top to bottom: Relative > Absolute > default, the relative div overwrites the upper part of the absolute div in the upper left corner and moves to the lower part after the top offset, but the default div is still not automatically top, because the relative position of the initial position is still occupied.

There is no way to use z-index to set a parent-child relationship. The child must be above and the parent must be below.