Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the use of the position:relative attribute in CSS". In the daily operation, I believe that many people have doubts about the use of the position:relative attribute in CSS. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "what is the use of the position:relative attribute in CSS?" Next, please follow the editor to study!

Quote

Static: no special positioning, objects follow HTML positioning rules

Absolute: drag objects from the document stream and use attributes such as left,right,top,bottom for absolute positioning. The cascading is defined by the z-index attribute. At this point, the object does not have margins, but there are still blanks and borders.

Relative: objects cannot be cascaded, but will be offset in the normal document stream based on attributes such as left,right,top,bottom

Fixed: IE5.5 and NS6 do not support this attribute yet

"for the div#demo of a static in the page, I want a div#sub in this # demo to be located somewhere in the upper right corner relative to # demo. I should use this position:relative, and then add top,right to limit it.

Do I understand it correctly? "

First of all, let me answer your doubts:

The default value for position is static, (that is, for any element, if its position attribute is not defined, then its position:static)

If you want a div#sub in the # demo to be located somewhere in the upper right corner relative to the # demo, you should give the # demo relative location, the # sub absolute location.

Absolute is positioned relative to its nearest parent element. If you don't give the relative positioning of # demo, then the absolute positioning of # sub is relative to body.

The relative is positioned relative to itself, for example: # demo {position:relative;top:-50px;}, where # demo moves the 50px up relative to its original position.

Also: relative is not separated from the document stream, and absolute is separated from the document stream. In other words, although the element of relative appears to have deviated from its original position, it actually remains the same in the document stream. The elements of absolute are not only relocated, but also detached from the document stream.

An example is written as follows:

The code is as follows:

Position static: default value. Without special positioning, the object follows the HTML positioning rule absolute: drag the object from the document stream, and use attributes such as left,right,top,bottom to make absolute positioning relative to its nearest parent object with the most positioning settings. If such a parent object does not exist, it depends on the body object. Its cascading is defined by the z-index attribute fixed: not supported. Object positioning follows the absolute (absolute) mode. But to comply with some norms relative: objects can not be cascading, but will be based on attributes such as left,right,top,bottom in the normal document stream offset position to this, on the "what is the use of position:relative attributes in CSS" learning is over, I hope to be able to solve everyone's 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.