Application of Position absolute and relative in CSS

The default attribute values are static and static. You don't have to talk about it. The most important thing is
Relative (relative) and absolute (absolute ).
If we copy other people's code, we will combine the absolute attribute with left and top to create the "floating layer" effect. However, sometimes we need to focus on the floating effect of a container, rather than the window. At this time, the calculation of height and width is not only troublesome, but also almost impossible to achieve the perfect effect. I couldn't do anything at the beginning. Later I found that I only needed to set the position of the style attribute at the upper level to relative.

That is to say, the effect of the position attribute value is directly affected by the position attribute value in the container style.
For example, the nested structure of the following A-B

<Div id = "A">
<Div id = "B">
</Div>
</Div>

When the position of a is relative, the position of B is absolute. At this time, left: 0 and top: 0 are no longer for the window document, but for the DIV with ID.

In this way, when developing some B/S-based applications, you can easily add some UI elements, such as the close button of an activity layer.