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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
