CSS magic Hall: Position positioning details

CSS magic Hall: Position positioning details
I. explanation of each Position attribute value 1. static: default value. The elements are arranged according to the normal document flow rules. 2. relative: relative positioning, the element is still in the normal document stream, but the position of the element can be changed through the CSS rules of left, top, right, and bottom. Note: [a]. the original position of the element is retained and is not occupied by other elements. [B]. when left and top are used to change the position of an element, the element uses the upper left corner of the outer border of the original location as the reference point. [c]. when right and top are used to change the element position, the element uses the upper right corner of the border outer border in the original position as the reference point. [d]. when left and bottom are used to change the element position, the element uses the lower left corner of the border outer border of the original position as the reference point. [e]. when right and bottom are used to change the element position, the element uses the bottom right corner of the border outer border of the original position as the reference point; 3. absolute: absolute positioning. elements are separated from normal document streams. You can use the CSS rules of left, top, right, and bottom to change the position of elements. Note: [a]. the element no longer occupies the original position. The variable X is defined here. The following content uses X to replace the reference point condition: When the offsetParent of the element is body and the body does not If CSS is enabled, X = page. In other cases, X = offsetParent's border outer border. [B]. when left and top are used to change the position of an element, the element uses the upper left corner of X or as the reference point. [c]. when right and top are used to change the element position, the element uses the upper right corner of X as the reference point. [d]. when left and bottom are used to change the element position, the element uses the lower left corner of X as the reference point. [e]. when right and bottom are used to change the element position, the element uses the lower right corner of X as the reference point. 4. fixed: fixed positioning. elements are separated from normal document streams. You can use the CSS rules of left, top, right, and bottom to change the position of elements. Note: [a]. the element no longer occupies the original position. [B]. use the four corners of the visible area of the browser as the reference point. [C]. IE5.5 ~ 6. This attribute value is not supported. You can use js to fix the bug. The following CSS should be used to handle the bug of dragging the scroll bar element. * Html {background-image: url (about: blank); background-attachment: fixed;} Or body {_ background-image: url (about: blank ); _ background-attachment: fixed;} 2. What is the meaning of discontinuing from the document stream. 3. What is CSS positioning? The position of an element is not static. This element will become the offsetParent of its parent-child element and the offsetParent of its child element. Iv. Summary CSS positioning seems simple, but it is easy to ignore the details. This article will record the details as much as possible and hope you can enrich them together. Respect originality. For reprinted content, please indicate the source: http://www.cnblogs.com/fsjohnhuang/p/3967350.html Pai_^ fatzi John