[CSS] About position:absolute layout_html/css_WEB-ITnose

In a web page, if you need the left and top attributes to take effect, you must add position:absolute to the style attribute of this div. In this way, this div can be free from the overall div layout. In other words, you Before adding position:absolute, all divs follow the various layouts I mentioned in "[CSS] Alignment of divs and web page 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>

will get the following effect:

If position If :absolute is removed, the left and top attributes will have no effect, that is, the following code:

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

The effect obtained is like this:

This layer with a black box has not moved as expected at all.

But it does not mean that the left and top are the distance from the upper left corner of the browser. It is the distance from the upper-level div. If there is no upper-level div, then it is the distance from the upper left corner of the browser, which is the distance from the body, the largest layer of this web page.

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:20px; height:20px; border:1px solid #000000;"></div>

The result is the following effect:

First, the first picture Layer is the layer used for explanation at the beginning. position:absolute is not affected by the layout of any div and is free from the system.

Then, the second layer has no superior 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 inside the second layer, and its superior div is the second The layer has a superior div, so the left and top after position:absolute are the distance between its 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, you may wish to consider using position:absolute and javascript.