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

This article mainly introduces "what are the types of position attributes of CSS". In daily operation, I believe many people have doubts about the types of position attributes of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what types of position attributes of CSS". Next, please follow the editor to study!

Four types of position

(1) static

Static is the default value for the position attribute. By default, block-level elements and inline elements are displayed according to their respective properties.

(2) relative

Relative is translated into Chinese as relative positioning. When this attribute is set, the element will be offset according to top,left,bottom,right. The key point is that its original space is still retained. Let's look at the following example:

HTML code

CSS code

Div {background: # 0094ff; width: 250px; height: 100px;}

.relative {background: # ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px;}

(3) absolute

When the element is set to absolute, it will break away from the document flow and do not occupy the original space, and the following elements will be replaced, and a block-level box will be generated regardless of whether the element is inline or block-level, that is, after the inline element span has set absolute, you can set the height and width attributes. Look at the following example:

HTML code

Div {background: # 0094ff; width: 250px; height: 100px;}

.absolute {background: # ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px;}

Absolute effect

As shown in the figure, when the span tag is set to absolute positioning, the height and width attributes can be set without occupying the original space, and the subsequent div element will be replaced.

(4) the expression of fixedfixed is similar to that of absolute, but compared to the offset of absolute relative to the uncertain parent element, fixed is offset from the browser window.

Include block

In the detailed explanation of CSS float attributes, we mention the concept of include blocks. There are also position attributes that contain blocks, which are discussed in several cases:

1. The root element contains the block. The root element is usually the html element. Some browsers use body as the root element. In most browsers, the initial containing block is a window-sized rectangle.

two。 The containing block of a non-root element, if the element's position is relative or static, its containing block is the nearest block-level box, the cell of the table, or the content boundary of the inline block.

At this point, the study on "what are the types of position properties of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.