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

This article mainly shows you "CSS how to set the absolute positioning of elements", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS how to set the absolute positioning of elements" this article.

The CSS attribute used to set the absolute positioning of the element is "position", you only need to set the value of the position attribute to "absolute", and the syntax "element {position:absolute;}"; the element set to absolute positioning is completely removed from the document stream and positioned relative to its containing block.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The CSS attribute used to set the absolute positioning of the element is "positon".

The position attribute specifies the positioning type of the element, and absolute positioning can be achieved simply by setting the value of the positon attribute to "absolute".

An element set to absolute positioning is completely removed from the document stream and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space previously occupied by the element in the normal document stream is closed as if the element did not already exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.

Basic features of absolute positioning

The first feature of absolute positioning is that it is separated from the document stream and is not affected by other elements, so it is called absolute positioning. If it is relative positioning, it will be affected by other elements, then positioning is "relative".

Unused positioning: that is, the element is in the normal document stream

.frame {margin: 0 auto; margin-top: 50px; width: 400px; height: 300px; background-color: yellow;} # div1 {width: 100px; height: 50px; background-color: blue;} # div2 {width: 200px; height: 100px; background-color: green;}

When we add absolute positioning to an element, the element deviates from the current document stream

# div1 {position: absolute;}

That is to say, the absolutely positioned element has no place in the document stream, it is detached from the document stream, and the subsequent element will fill in its original position.

The second feature of absolute positioning is that the location is relative to the first ancestor element with a location attribute (that is, position is relative or absolute).

# div1 {top: 30px;}

When setting a positioning value for an absolute positioning element, the element will look up the DOM tree until an ancestor element with a positioning attribute is found, then the positioning is relative to that element. In this case, because none of its ancestor elements have positioning attributes, the absolute positioning element will be positioned relative to the Body body; if a positioning attribute is added to its parent element, the absolute positioning element will be relative to the parent element

.frame {position: relative; / * or position: absolute; * /}

Absolute positioning advanced features

The first advanced feature of an absolute positioning element is its auto-scaling function. When we set width to auto (or not, the default is auto), the absolute positioning element will automatically scale its size according to its left and right (note: please keep in mind that the positioning value of the absolute positioning element is relative to the first ancestor element with positioning attribute)

# div1 {width: auto; left: 100; right: 50px;}

According to the first advanced feature, we can derive the second advanced feature, because the absolute behavior element has the function of automatic scaling, if the width value is auto, if we set left and right to 0, then the element will be filled with its relative element, if we set the width to a fixed value. This is that absolute positioning elements give priority to the left value as the positioning flag (this standard applies to document streams that read from left to right, while right is preferred in a few document streams that read from right to left). If we set margin to auto at this time, the absolute positioning element will be centered

# div1 {margin: auto; width: 100px; left: 0; right: 0;}

In fact, it does not have to be set to 0. Under margin: auto, as long as the values of left and right are equal and not more than half of their relative elements minus half of the absolute positioning element width, the center can be achieved; if its left is out of range, then the value of left will be taken as the location (document flow from left to right); / * as for the unequal values in the range, you can test it yourself * /

The above examples are all implemented horizontally, so what is the vertical direction? In fact, the effect of the vertical direction is the same, the vertical direction can also stretch automatically, and by the same token, we can also achieve automatic centering in the vertical direction.

# div1 {top: 0; bottom: 0;}

Unlike horizontal centering, no matter what the values of top and bottom are set, as long as they are equal, they can be centered vertically.

The above is all the content of the article "how to set the absolute positioning of elements in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.