"CSS" About position:absolute layouts

In a Web page, if you need the left and top properties to take effect, you must add Position:absolute to the style attribute of the Div, so that the div can be detached from the overall div layout, that is, before you add Position:absolute , all the div follows the various layouts I mentioned in the "CSS" about div alignment and page layout (click to open link).

For example, the following code:

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

You get the following effect:

If you remove the Position:absolute, then the left and top properties are not working, which is the following code:

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

The resulting effect is this:

The layer with the black box is not moving at all as expected.

But it doesn't mean that this left and top is the distance from the top right corner of the browser. It is the distance from the superior div, if there is no superior div, then is the distance from the upper left corner of the browser, that is, relative to the body, the maximum layer of the page distance.

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 following effects are obtained:

First, the first layer is used to illustrate the layer, Position:absolute is not affected by the layout of any div, oneself free from the system,

Then, the second layer, no upper Div, so left and top after Position:absolute is the distance from the top left corner of the browser

Finally, the third layer, in the second layer, the upper div is the second layer, there is a superior div, so the left and top of the Position:absolute is its own top corner relative to the second layer of the upper left corner of the distance.

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

"CSS" About position:absolute layouts