CSS相对定位（Relative positioning of CSS）.docVIP

CSS相对定位（Relative positioning of CSS） CSS relative positioning: The element box, which is set relative to the location, offsets a distance. The element remains as a pre positioned shape, and the original space remains. If an element is positioned relative to it, it will appear in its place, and then you can move the element relative to its starting point by setting the vertical or horizontal position. Top = 20px, then the box will be 20 pixels below the top of the original position, Left=30px then creates the 30px space on the left side of the element, that is, moving the element to the right. #box_relative {position:relative; left:30px; top:20px;} CSS absolute positioning: Absolute positioning allows the location of the element to be independent of the document flow and therefore does not occupy space. This is different from the relative positioning, and relative positioning is actually seen as part of the generic flow localization model because the position of the element is relative to its position in the ordinary stream. The layout of other elements in an ordinary stream is like an absolute positioning element: #box_relative {position: absolute; left: 30px; top: 20px;} The location of an absolute element is relative to the nearest localized ancestor element; if the element does not have a fixed ancestor element, then its position is relative to the original containing block. * * relative positioning is the initial position relative to the element in the document * * absolute positioning is relative to the nearest localized ancestor element, and if there is no already defined ancestor element, it is relative to the original containing block. Note: depending on the user agent, the initial inclusion block may be a canvas or HTML element. Tip: because absolute positioning boxes are independent of document flow, they can override other elements on the page. You can control the stacking order of these boxes by setting the Z-index property. CSS floating: The floating bo