Detailed CSS positioning application and Precautions

Before explaining the CSS positioning, first of all to understand the following properties of the true meaning and difference, as follows:

"Position:relative | Absolute | static | Fixed "

A: Relative positioning (position:relative): If you have a relative positioning of an element, it will appear in its location. You can then move the element "relative to" its starting point by setting the vertical (or horizontal) position (Top,right,bottom,left four value). Note: An element box that is set to relative positioning offsets a distance. The element still retains its shape before it is positioned, and its original space remains;

B: Absolute Positioning (Position:absolute): Absolute positioning makes the position of an element independent of the document flow, so it does not occupy space. Unlike relative positioning, relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream. Note: The element box that is set to absolute positioning is completely removed from the document stream and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupies in the normal document stream closes as if the element did not exist. A block-level box is generated when the element is positioned, regardless of what type of box it originally generated in the normal stream;

C: Fixed positioning (position:fixed): The position of the fixed positioning element is always positioned in the upper-left corner of the window; Note: IE6 is incompatible with this property;

D:static: There is no special setting, follow the basic positioning rules, can not be hierarchical by z-index;

"Positioning principle: in the text stream, the position of all elements is limited by text flow, but we can change the position of these elements (such as: margin,float) through CSS style; in fact, the real displacement is achieved through the top,right,bottom,left."

A:position:relative: The relative positioning element does not break away from the document stream, it refers to the upper-left corner of its own static position and moves through the top,right,bottom,left position. Note: The original position of the relative positioning layer will continue to occupy the document flow, as shown below:

When the red area is relative positioned, the relative a point is shifted through the top:20px,left:15px, but the original position of the relative positioning layer will remain.

B:position:absolute: An absolutely positioned element is detached from the document stream, and its most recent parent-positioned element is selected and moved through the top,right,bottom,left position. Note: When the parent position property is static, the position of the absolute displacement will be calculated by the origin coordinate of the body; The following figure: The red region is absolutely positioned, and the location layer is separated from the document stream, and if the a dot layer is relative (or absolute), That is, the parent of the red area, the location layer will be shifted with a point coordinate through the top:20px,left:15px; When the parent is not positioned, the document is shifted by the body's origin coordinate through the top:20px,left:15px;

"The practical application of positioning"

Question one:

The IE6 itself does not support the Position:fixed property, but the problem can be resolved by hack method, as follows:

position:fixed;top:0;left:0; /* Do this style in browsers other than IE6 * *

_position:absolute:_top:expression (documentelement.scrolltop + 0 + "px"); /* Only IE6 execute this style * *

Question two:

When absolute positioning and relative positioning are used together, a parity bug is generated under IE6; when the width of the relative positioning layer is odd, the position of the absolute positioning layer is the upper right (or lower right), the 1-pixel gap appears on the right side of the IE6, whereas when the relative positioning layer is odd, the position of the absolute positioning layer is lower left ( or lower right), there will be a 1-pixel gap below the IE6, so when positioning, the relative positioning layer to avoid the use of odd-numbered values, if you must use odd values, you can hack the IE6 to write values (such as left:0px;_left:-1px;);

The principle of positioning is a separate method of use, and in the practical application we always use some special forms, that is, the hope that the elements have absolute positioning characteristics, but also want the absolute location of the coordinate origin can be arbitrarily fixed at a certain point in the Web page, when the relative point at random move, the absolute positioning layer can be changed position, That is, the absolute positioning layer can move with the Web page; If you want to implement this positioning method, you must set the relative positioning value at the parent of the absolute positioning layer, then the absolute location layer starts at the origin of the parent coordinate origin; This method is widely used in Web page production, as follows:

1. The left and right button (index_zuo,index_you) style of the scroll graph is absolute positioning, and its parent (Rollbox) style is relative positioning;

2. Avatar layer (PIC) style is absolute positioning, its parent (box) style is relative positioning;

There are many practical applications such as Pull-down menus, focus diagrams, carousel diagrams and irregular complex structures that use such positioning methods.

Because of the various types of browsers in the market, the support for CSS positioning is slightly different, among which the IE6 problem is relatively large, which requires different debugging according to different conditions;

Article Source: Sohu Media Design Center