I. position syntax and structure
Position syntax:
Position: static absolute relative
Position parameter:
Static: no special Positioning. Objects follow HTML positioning rules.
Absolute: drag an object out of the document stream and use left, right, top, bottom, and other attributes for absolute location. Its stack is defined by the css z-index attribute. At this time, the object does not have margins, but still has padding and border
Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.
Position Description:
Setting the object locating method makes it easy for the layout layer to locate the position absolutely, and controls the sub-objects of the box to be more accurate.
II. Practical use of position
Absolute positioning position is used to locate the box objects. Sometimes a few small objects in a layout are not easy to use css padding and css margin for relative positioning. At this time, we can use absolute positioning to easily locate the objects. In particular, the layout of several small boxes in a box is irregular. In this case, we can use position to locate objects conveniently.
Absolute positioning position: demonstrate the applicable graph and irregular layout. You can use position: absolute; position: relative to perform absolute positioning.
Absolute positioning and float floating cannot be used at the same time. For example, some in a large box are absolute positioning, while others are css float floating positioning, in this way, the IE6 browser will not display the absolute positioning and relative positioning in the large object, which is also IE6 css hack. Be sure not to mix them.
III. Absolute positioning conditions of use
Position: absolute; position: relative absolute positioning: usually the parent class defines position: relative positioning, and the child class defines position: absolute positioning attribute, in addition, left, right, top, or bottom are used as the sub-level for absolute positioning.
. Divcss5 {position: relative} is defined. It is usually better to define the CSS width and CSS height.
. Divcss5-a {position: absolute; left: 10px; top: 10px} defined here the distance from the left side of the parent level is 10px, and the distance from the parent level is 10px
Or
. Divcss5-a {position: absolute; right: 10px; bottom: 10px} defined here the distance from the parent level to the right is 10px, and the distance from the parent level to the bottom is 10px
Corresponding HTML structure
| The code is as follows: |
|
|
<Div class = "divcss5 & Prime;>
<Div class = "divcss5-a"> </div>
</Div>
|
In this way, the "divcss5-a" is definitely located in the parent "divcss5" box.
Note that left (left) and right (right) can only select one definition for an object, bottom (bottom) and top (top) you can select only one definition for an object.
IV. position application cases
Here, DIVCSS5 applies absolute position to the instance. We set the css border of an outermost box to red, css width to 400px, css height to 200px, and contains two boxes, in order to use absolute positioning of the two boxes, the first box of CSS named "divcss5-a", its width is 100px, the background color is black, the height is 100px, positioning distance to the parent level is 10px, the distance left is 10px; the second box CSS class is named "divcss5-b", its width and height are 50px, css background color is blue, and the distance from the parent level is 13px, 15 px to the right of the parent level.
| The code is as follows: |
|
|
<Style>
. Divcss5 {position: relative; width: 400px; height: 200px;
Border: 1px solid #000}
/* Define the parent position: relative as the absolute position Declaration */
. Divcss5-a {position: absolute; width: 100px; height: 100px;
Left: 10px; top: 10px; background: #000}
/* Use the absolute position: absolute style and left top to locate the position */
Divcss5-b {position: absolute; width: 50px; height: 50px;
Right: 15px; bottom: 13px; background: # 00F}
/* Use absolute position: absolute style and right bottom to locate the position */
</Style>
|
Html code snippet
| The code is as follows: |
|
|
<Div class = "divcss5 & Prime;>
<Div class = "divcss5-a"> </div>
<Div class = "divcss5-b"> </div>
</Div>
|
V. Summary of absolute css positioning
Usually we use position: absolute; position: relative to absolutely position the layout, define the positioning through CSS, DIV layout HTML, note where position: relative is used, and where position is used: do not forget to use the combination of left, right, top, and bottom to locate the specific location. Absolute positioning if the parent class does not use position: relative, but directly uses position: absolute for absolute positioning, the body label will be used as the parent class, and position: no matter how many layers of DIV structure the absolute definition object is located, it will be dragged out to the <body> level as the parent level (reference level) for absolute positioning. Absolute positioning is very easy to use, but remember not to abuse it and use it wherever it is. In this way, sometimes the distance between top, bottom, left, and right may not be computed, and CSS code may be bloated, more experienced and suitable for use.
In absolute positioning, we can use css z-index to define the overlapping sequence of css layers.
At the same time, you can use the (Photoshop) PS slicing tool to obtain accurate values for the left, right, bottom, and top values.
