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

This article will explain in detail what the position attribute value and its characteristics are. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Position attribute

The position attribute is used to specify the positioning type of the element, that is, to place the element in a static, relative, absolute, or fixed position. So it has four property values in the position property: static, relative, absolute, and fixed. Next, the usage and characteristics of these four attribute values will be introduced in detail in the article.

Static attribute value

The static attribute represents the default value, that is, there is no positioning, and the element appears in the normal flow. Ignored top,bottom,left,right or z-index declaration

Div {

Width:100px

Height:100px

Border:10pxsolid#ccc

}

Div.static {

Position:static

Border:10pxsolidpink

}

Position:static is used

Effect picture:

Relative attribute value

Elements that represent relative positioning can be positioned relative to their normal (original) position through the setting of top,bottom,left,right. It is positioned by default with reference to the parent's original point as the original point, and if there is no parent element, the original point is located at the bottom of the previous element.

1. Relative positioning does not affect the characteristics of the element itself.

2. The element will not be detached from the document stream (the original position of the element will be retained)

3. No effect on the element when there is no positioning offset.

4. To improve the level, you can use z-index to change the hierarchical relationship of a positioning element, thus changing the coverage relationship of the element. The higher the value, the higher the value.

Div {

Width:200px

Height:200px

Background-color:pink

}

Div.relative {

Position:relative

Background-color:lightblue

Left:45px

}

Parent element

Child element

This is the end of the article on "what are the position attribute values and their characteristics". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.