Common techniques that must be explored in CSS positioning

Common techniques that must be explored in CSS positioning

CSS positioning is often used at will to meet your own requirements. However, the position and other attributes in CSS do need to be carefully studied.

1. position: static

The static attribute is the default value of position. That is to say, when an element does not set the position attribute for it, its default value is static.

2. position: absolute

This is a position attribute value that is often used. If absolute is set for an element, the element is detached from the original document stream. For example, if position: absolute is defined for element a, the element will not have a positional relationship with other elements on the page, it is the floating state above the whole page. The location and size changes of other elements on the page do not affect the location of Element a, which is equivalent to an outsider.

3. position: relative

Relative is the most useful definition method. If the relative attribute is set, the element changes relative to its original position. For example, we define a B element and set the following css style for it:

#b{    position: relative;    width:100px;    height:100px;    top:100px;}

The position of Element B defined in this section is the distance from the position without the position attribute defined to PX downward. The value of the relative attribute is defined in this positioning mode.

4. position: fixed

Fixed positioning is rarely used, but it is very suitable for partial production in fixed mode, such as top menu. After the fixed attribute is defined, the element position does not change with any behavior.

5. relative + position

Using these two positions at the same time is a very common method, and new users may encounter a lot of trouble here. In general, if an element is absolutely positioned, its reference object is to determine whether relative positioning is set for the element closest to itself. If it is set, it will be located by the element closest to itself, if the relative positioning element is not found for its ancestor element, the html is always found. For example, the following code uses the combination of the two to implement a two-column layout;

#div-1 {             position:relative;            }            #div-1a {             position:absolute;             top:0;             right:0;             width:200px;            }            #div-1b {             position:absolute;             top:0;             left:0;             width:200px;            }

The two sub-div inside will perform absolute positioning based on the external element positioned as relative.

6. clear: both clear floating

Sometimes the positioning will collapse, that is, the child element is in the parent element, but the size of the parent element will not be "opened" with the size of the child element, this causes the collapse of the parent element. This bug occurs because the child element sets the float attribute, resulting in the collapse of the parent element. To solve this bug, you need to clear the floating for the parent element. The sample code is as follows:

    #div-1a {             float:left;             width:190px;            }            #div-1b {             float:left;             width:190px;            }            #div-1c {             clear:both;            }