Two consecutive divs, one is in an absolute position and the other is in a relative position. Will they affect each other? _html/css_WEB-ITnose

Position of the first div

Position of the second div

and

Position of the first div

Position of the second div

My understanding is that the first div and the second div should have no effect. Should they be on different levels? Please advise

Reply to the discussion (solution)

These two will have no impact

There will be no impact. . Their positions are relative to the parent div

These two will not have any effect
You try it in html and find that the second div above is different margin: 14 10 0 19; The second div below margin:14 10 0 0; will display a different effect. Why?

will not be affected. . Their positions are relative to the parent div
Same as above

The second div margin: 14 10 0 0;
Only the left margin of the second div has been changed, and only the left margin of the second div has been changed. The position of the two divs will have an impact

Quoting the reply from the 1st floor:

These two will not have an impact

You can try it in html and you will find the difference. The second div above margin: 14 10 0 19; the second div below margin: 14 10 0 0; The display effect will be different. Why
The left margin is different, of course the display effect is different.

Define position:absolute
then the div breaks away from the default sequence flow of the document (DOCUMENT)

The first abslute div can only eliminate its own space in the document flow It will only affect the positioning of elements around its original space. The rule at this time is: it is as if the div disappears from the document flow and never appears. The top and left positioning after breaking away from the document flow will not affect the positioning of any other elements, and it can be overlaid on other elements at will. You can use z-index to adjust the display priority of the z-axis.
The second relative div first occupies the space in its normal position in the document flow, and keeps this space in the document flow, and then offsets it relative to the original position according to top left, etc. (the original space does not Offset), at this time it does not affect the positioning of other elements, and can also be overlaid on other elements.
In summary. When defining an absolute div, the second div moves upward to take up space (because the first div has eliminated the space), and the subsequent positioning of the two divs does not affect each other.

Detailed explanation on the 8th floor

I found that it is a problem with IE. There is no problem with Firefox and IE7, but there is a problem with IE9

Under IE9, the two divs are different
Quoting the reply from the 3rd floor:

Quoting the reply from the 1st floor:

These two will have no effect

Try it in html and you will find that it is different from the above. The second div margin:14 10 0 19; The second div below margin:14 10 0 0; The display effect will be different. Why?

The left margin is different, and of course the display effect is different.