Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you what are the key points about the use of the position positioning attributes of CSS. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

With regard to CSS positioning, some people often use it casually and meet their own requirements. But attributes such as position in CSS do have a lot to look into.

1.position:static

The static attribute is the default value for position, that is, when an element does not have a position attribute set 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. Figuratively speaking, for example, if the an element is defined as position:absolute, then this element will not have a positional relationship with other elements on the page, but will override the floating state on the entire page. Changes in the position and size of other elements on the page do not affect the position of element a, which is equivalent to an outsider.

3.position:relative

Relative is the most useful method of definition. The relative attribute is set to indicate the change of the element relative to its original position. For example, we define a b element and give it the following css style:

CSS Code copies content to the clipboard

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

The b element defined by this code is positioned to move the 100px down relative to the location where the position attribute is not defined. The definition of the relative attribute value is such a positioning mode.

4.position:fixed

Fixed positioning is not used much, but it is very suitable for fixed-mode parts of production, such as the top menu. Once the fixed attribute is defined, the position of the element does not change with any behavior.

5.relative+position

Using these two positions at the same time is a very common technique, and beginners may encounter a lot of trouble here. Generally speaking, if an element is absolutely positioned, its reference is based on whether the element closest to itself has set relative positioning, if there is a setting, it will be positioned with the element closest to it, and if it is not looking for a relative positioning element to its ancestor element, until html is found. For example, the following code uses a combination of the two to implement a two-column layout

CSS Code copies content to the clipboard

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

The two internal child div are positioned absolutely based on the elements whose external positioning is relative.

6.clear:both clear float

Sometimes positioning will collapse, that is, the child element is in the parent element, but the size of the parent element will not be "stretched" with the size of the child element, resulting in the collapse effect of the parent element. This kind of bug occurs because the child element sets the float attribute, which leads to the collapse of the parent element. To solve this kind of bug, you need to set a clear float for the parent element. The example code is as follows:

CSS Code copies content to the clipboard

# div-1a {float:left; width:190px;} # div-1b {float:left; width:190px;} # div-1c {clear:both } these are the key points of the position positioning attributes of CSS shared by Xiaobian. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.