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

This article mainly shows you the "example analysis of relative and absolute positioning in CSS", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of relative and absolute positioning in CSS".

CSS relative positioning

Element boxes set to relative positioning are offset by a distance. The element still retains its unpositioned shape and the space it originally occupied.

Position the element relatively and move the element "relative to" its starting point by setting a vertical or horizontal position.

If top is set to 20px, the box will be 20 pixels below the top of the original location.

If left is set to 30 pixels, 30 pixels of space is created on the left side of the element, that is, the element is moved to the right.

# box_relative {position: relative; left: 30px; top: 20px;}

Note that when using relative positioning, the element still occupies the original space. Therefore, moving the element causes it to overwrite other boxes.

CSS absolute positioning

An element box set to absolute positioning is completely removed from the document stream and positioned relative to its 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.

Absolute positioning makes the position of the element independent of the document flow, so it does not take up space. This is different from relative positioning.

Relative positioning is actually regarded as part of the normal flow positioning model because the position of the element is relative to its position in the normal flow.

The layout of other elements in a normal flow is as if an absolutely positioned element does not exist:

# box_absolute {position: absolute; left: 30px; top: 20px;}

The position of the absolutely positioned element is "relative" to the nearest positioned ancestor element. If there are no located ancestor elements

Then "relative" to the original inclusion block. Depending on the user agent, the initial inclusion block may be a canvas or HTML element.

Unlike absolute positioning, the position of a relatively positioned element is the initial position of the "relative" element in the document.

Because absolutely positioned boxes are independent of the document flow, they can override other elements on the page.

You can control the stacking order of these boxes by setting the z-index property.

The above is all the contents of the article "sample Analysis of relative and absolute Positioning 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.