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

This article will explain in detail how to achieve absolute positioning of CSS. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

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 a normal flow is as if an absolutely positioned element does not exist:

# box_relative {

Position:absolute

Left:30px

Top:20px

}

CSS absolute positioning instance

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.

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.

This is the end of the article on "how to achieve absolute positioning in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.