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

This article mainly explains "how to use absolute absolute positioning properties in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use absolute absolute positioning attributes in CSS".

CSS absolute attribute

The element box that is 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.

CSS absolute positioning

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, which is actually regarded as part of the ordinary flow positioning model, because the position of the element is relative to its position in the ordinary flow.

The layout of other elements in the normal flow is as if the absolutely positioned element does not exist, the code is as follows:

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

The effect is shown in the following figure:

The position of the absolutely positioned element is relative to the nearest positioned ancestor element, and if the element does not have a positioned ancestor element, then its position is relative to the original containing block.

The main problem with positioning is to remember the meaning of each positioning. So, now let's review what we have learned: relative positioning is the initial position of the "relative" element in the document, while absolute positioning is "relative" to the nearest positioned ancestor element, if there is no positioned ancestor element. So "relative" to the original containing block.

Note: depending on the user agent, the initial inclusion block may be a canvas or HTML element.

Tip: because absolutely positioned boxes have nothing to do with 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.

CSS absolute positioning instance

H3.pos_abs {position:absolute;left:100px;top:150px} this is a title with absolute positioning

With absolute positioning, elements can be placed anywhere on the page. The following title is from 100px on the left side of the page and 150px from the top of the page.

Thank you for reading, the above is the content of "how to use absolute absolute positioning attributes in CSS". After the study of this article, I believe you have a deeper understanding of how to use absolute absolute positioning attributes in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.