Research on how CSS enables super join to zoom in and display

The code is as follows:

The code is as follows:

Copy code

<! -- StartFragment --> <style type = "text/css"> . Demo { Float: left; Margin: 5px 1px 0 1px; Width: 20px; Height: 20px; Color: #999; Font: 12px/20px; Text-align: center; Text-decoration: none; Border: 1px solid orange; } . Demo a: hover { Position: relative; Margin: 0-9px 0-9px; Padding: 0 5px; Width: 30px; Height: 30px; Font: bold 16px/30px; Color: #000; Border: 1px solid black; Background: # eee; } </Style> <Div class = "demo"> <A href = "#"> 1 </a> <A href = "#"> 2 </a> <A href = "#"> 3 </a> <A href = "#"> 4 </a> <A href = "#"> 5 </a> <A href = "#"> 6 </a> <A href = "#"> 7 </a> <A href = "#"> 8 </a> <A href = "#"> 9 </a> <A href = "#"> 10 </a> </Div>

The key to amplification lies in the positioning of elements, position: relative and negative margin. To learn about position:
Setting this attribute value to absolute will drag the object out of the normal document stream and definitely locate it without considering the layout of its surrounding content. If other objects with different z-index attributes occupy a given position, they will not affect each other, but will stack at the same position. At this time, the object does not have an external patch (margin), but it still has an internal patch (padding) and a border (border ).
To activate the absolute (absolute) positioning of an object, you must specify at least one of the left, right, top, and bottom attributes and set this attribute value to absolute. Otherwise, the property will use their default value auto, which will cause the object to follow the normal HTML layout rules and be presented immediately after the previous object.
Setting this property value to relative will keep the object in a normal HTML stream, but its position can be offset based on its previous object. The text or objects after the relative (relative) positioning objects occupy their own space and do not overwrite the natural space of the objects to be located. In contrast, the text or object after an absolute (absolute) positioning object occupies its natural space before it is dragged away from the normal document stream. Placing an absolute (absolute) positioning object outside the visible area will cause the scroll bar to appear. The scroll bar does not appear when the relative (relative) positioning object is placed outside the visible area.