The main scenario is that I want to layout blocks positioned in accordance with the parent, rather than according to the page.
For example, the following example, two semicircular I makes up a perfect circle, the idea is to use a parent tag of the two sub-wrap labels, parent tag is a perfect circle, and each half of the sub-label first into two rectangle, then it is to choose the location. Used herein is the parent of the child absolute phase, i.e. the relative position of the parent tag used, the label used in the absolute position of the child, so that the child will be able to label the two half parent tag attached to form a circle.
Note:
1. there is the parent tag need to use relative positioning, use absolute positioning, then will flow out of the document, see example below.
2. Label write position (relative or absolute), it would to its parent label as a reference, if the parent did not write css styles, it will as a reference to body style, if did not write, will be the entire html page reference. Here, for example, if the parent does not set position, then it will be two sub-label the entire html page as a reference point, and both ends of the rectangular floats pages
from the document flow, in fact, is not in accordance with the Chinese this page order, line line shifts down, but according to their own wishes, there may be some overlap, commonly used method is to locate and floating. See in particular the following few supplement
what is the document flow from the
normal document flow and document flow from the
HTML elements from the document flow of the three methods
The following example, if the relative positioning of the parent tag into absolute positioning, then the parent tag and label adjacent to the test and will be the parent tag overlap, that is, from the document flow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-size: 15px;
color: #fff;
}
.test1 {
width: 400px;
height: 400px;
background: #234;
position: relative;
}
.test2 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
left: 40px;
top: 40px;
}
.test {
width: 500px;
height: 500px;
background: #123;
}
</style>
</head>
<body>
<div class="test1"> test1
<div class="test2">test2</div>
</div>
<div class="test"> test</div>
</body>
</html>