Div + css positioning position explanation, divposition

Div + css positioning position explanation, divposition

1. 1. the positioning position in div + css has two main attributes: the attribute absolute (absolute positioning) relative (relative positioning), which makes the layout diversity of div + css, make our webpage rich and colorful.

   First, explain relative (relative positioning). As the name suggests, positioning is relative. What is relative of relative? What is a reference object?

   See the following code:

2. 2. Preview The effect. Now there are three parallel Divs.

3. 3. Add the position attribute: position: relative; top: 10px; left: 10px to the div in the middle;

4. 4. Preview effect:

5. 5. Obviously, the reference object it moves is the original position.

   Pay attention to the code top: 10px; left10px;

   That is, move 10px down relative to the top, and move 10px to the right relative to the left;

   Note: The position attribute top right left bottom can only reference two adjacent edges, not upper or lower, or left or right.

   Change position: relative; to absolute;

6. 6. If the preview effect is not obvious, modify top: 30px; left30px;

   The current preview effect is as follows:

7. 7. it is found that the div in the middle is out of the document stream, and the right side is opposite to the left side of the div. Now the position of the div in the middle is calculated from the upper left corner of the browser, that is, moving 30 pixels down, move 30 pixels to the right.

   Now it involves a hierarchical relationship. Set the z-index attribute of the div. If the value is greater, the layer is displayed at the top. You can try it on your own.