[CSS] position: absolute layout, positionabsolute

[CSS] position: absolute layout, positionabsolute

In the webpage, if the left and top attributes need to take effect, you must add position: absolute to the style attribute of this div. In this way, this div can be moved out of the overall div layout, that is, before you add position: absolute, all the divs follow the various la s I mentioned in [CSS] About div alignment and webpage layout (click to open the link.

For example, the following code:

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

The following results are displayed:

If you remove position: absolute, the left and top attributes do not work, that is, the following code:

<div style="left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

The result is as follows:

This layer with a black box is not moved as expected.

This is not to say that the left and top are the distance from the browser's upper left corner. It is the distance from the upper-level div. If there is no upper-level div, It is the distance from the upper-left corner of the browser, that is, the maximum layer distance from the webpage to the body.

For example, the following code:

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div><div style="position:absolute; left:100px; top:100px; width:400px; height:400px; border:1px solid #000000;" ><div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div></div>

The result is as follows:

First, the first layer is the layer that is used to describe from the beginning. position: absolute is not affected by the layout of any div and is independent of the system,

Then, the second layer has no parent div, so the left and top after position: absolute are the distance between the upper left corner of the browser and the upper left corner of the browser.

Finally, the third layer is in the second layer, and its parent div is the second layer, which has the parent div, so position: the left and top after absolute are the distance between the upper left corner and the upper left corner of the second layer.

In addition, IE6 does not support position: fixed, so to achieve that hover effect, consider using position: absolute and javascript reality.