Understanding the position:relative of CSS

Recent work has done a few things are related to page element positioning, so here will be encountered in the work of the problems and solutions recorded in the blog for later review.

Stack pressure

One task is to make a list component, and each row in the list is stacked upward on the bottom of a line, noting that it is stacked, not bordering.

Problem Analysis:

Relative positioning (position:relative) is used to create a relative row (row) offset, which offsets the inline element upward and overlaps the bottom edge of the row element on the line.

Since it is relative positioning, it is not possible to have the anchor point for each row based on the bottom edge of the previous row. Because the datum point does not offset at the same time because the previous line of elements has been engaged by the CSS.

For example: 2 Div is arranged up and down, the first div (class= "div1") height is 100px, and the -10px is offset upward. The second div (class= "div2") height is also 100px, hoping to stack pressure to the bottom of the Div1 10px, so also set the top: -10px. If the Div1 datum point y-axis coordinates are =0px, then, in the case of div1 without an offset, the Div2 datum point y-Axis coordinates = Div1.top + div1.height, which is 0px + 100px = 100px. Now, Div1.top = -10px, which is an upward offset of 10px, the div2 reference point = -10px + 100px = 90px. Unfortunately, the reality is not so. There is no change in the Div2 datum point. Therefore, Div2.top = -10px still cannot be stacked to the bottom of the div1. Only if the div2.top=-20px can be stacked to 10px at the bottom of the div1. It is said that the height of the div1 should be increased by 10px, so that div2 can be stacked to div1. I tried to find out that when the height of the div1 increased by 10px, the Div2 's original datum point y-axis coordinates were followed +10px. Thus, the formula is re-applied:div2 the position datum y coordinate = Div1 's position datum y coordinate + div1 height , Div2 's position datum point y axis coordinates are 110px. The 110px-10px has an upward offset of =100px, while the div1 height is increased to 110px, but it offsets the -10px,div2 upward or the bottom edge of the DIV1 is not stacked.

Solution Ideas:

As the beginning of the problem analysis, the workaround is simple: do not let the subsequent element's anchor point be based on the previous element that will change position. Such as:

The original element is then arranged in the structure. In this structure, each element that is to be offset upward is the lower-left corner of the previous element that also needs to change position. This is not going to meet our needs. As long as there is a slight change in the structure of the element, you can, see, change the structure of the element:

Add a box element inside each of the original elements. Set the offset on the box element. Because each light-blue box element is based on its upper box element (a black-bordered div), rather than a box element that requires a change of position, each light-blue box element is shifted and the height is increased, it does not change the position datum of the next light blue box. Also, the height of each light blue box element does not cause its upper box element (the Black border div) to change height because the light blue box element changes its Top property and is considered a floating element. A floating element does not support the upper box element that contains it. So the second black box Div, and the third black Box Div's anchor point, will not change. In this way, we can achieve the effect of the light blue box elements superimposed on each other.

Implementation code:

<! doctype html>

Understanding the position:relative of CSS