do a floating layer effect and find that when the lower page scrollbar, the layer page will not move. It turns out that it is the problem of CSS positioning. I learned the position attribute.

setting this property to absolute will drag the object out of the normal document stream absolute positioning, regardless of the layout of the content around it. If other objects with different z-index properties already occupy a given location, they will not influence each other, but will be cascading in the same location. At this point, the object does not have an external patch (margin), but there are still internal patches (padding) and borders (border).

to activate absolute (absolute) positioning of an object, you must specify at least one of the left, right, top, bottom properties and set this property to absolute. Otherwise, the above properties will use their default value of auto, which will cause the object to follow the normal HTML layout rules and be rendered immediately after the previous object.

setting this property to relative keeps the object in the normal HTML stream, but its position can be offset based on its previous object. Text or objects that relative objects occupy their own space without overwriting the natural space of the anchored object. In contrast, text or objects that absolute an object will occupy its natural space before it is dragged away from the normal document stream. Placing absolute (absolute) anchored objects outside the visual area causes scroll bars to appear. The relative anchor object is outside the visual area, and the scroll bar does not appear.

it's interesting to see a related paging magnification effect.

-from: blueidea-

 & lt;style type="text/css">.demo a {Float:leftMargin:5px 1px 0 1pxWidth:20pxHeight:20pxColor:#999Font:12px/20px Song styleText-align:centerText-decoration:noneBorder:1px solid orange}.demo a:hover {Position:relativeMargin:0-9px 0-9pxPadding:0 5pxWidth:30pxHeight:30pxFont:bold 16px/30px Song styleColor:#000Border:1px solid blackBackground:#eee}& lt;/style>& lt;div class="demo">& lt;a href="">12345678910 
-from: blueidea- 
 
 effect is like right: