In html css, a container such as Div has three position attributes: static, relative, and absolute. Static is the default attribute, relative is relative to the parent container, and absolute is relative to the upper-layer container, which is not necessarily the parent container, if no locating upper-layer container is found. body.
How do containers interact with each other? See the following experiment.
1. Two-Level Div positioning Experiment
<HTML>
Note: The running effect cannot be fully reflected here because of the processing of website code. Copy the code to your browser and run it.
2. relational table
|
External |
Internal |
Inner Div width |
Percentage Coordinate |
1 |
Relative |
Absolute |
Text width |
Parent container |
2 |
Relative |
Relative |
Parent container width |
Parent container |
3 |
Static |
Relative |
Parent container width |
Parent container |
4 |
Static |
Absolute |
Text width |
Browser window |
5 |
Absolute |
Absolute |
Text width |
Parent container |
6 |
Absolute |
Relative |
Parent container width |
Parent container |
|
|
|
|
|
|
Conclusion: 1. The width and positioning attributes of the sub-component in the container are not related to the parent container in relative; When the position of the sub-component is absolute, it is located in the absolute and relative of the parent container, The text width attribute is irrelevant to the parent container. 2. When the sub-component is absolute, the default width is the text width. When the sub-component is relative, the default width is the parent container width. |
Relationship between positions of two-layer containers