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

This article mainly introduces the relative positioning and absolute positioning in CSS what is the difference between the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that you read this CSS in the relative positioning and absolute positioning what the difference between the article will have a harvest, let's take a look at it.

The difference between CSS relative positioning and absolute positioning

CSS relative positioning

CSS relative positioning is a very easy concept to grasp. If an element is relatively positioned by CSS, it will appear at its location. You can then move the element "relative to" its starting point by setting the 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;}

As shown in the following figure:

Note that when using CSS relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving the element causes it to overwrite other boxes.

The element box set to CSS 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

CSS absolute positioning makes the position of the element independent of the document flow, so it does not take up space. This is different from CSS relative positioning, which 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 the elements that are absolutely positioned by CSS do not exist:

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

As shown in the following figure:

The position of the CSS absolute positioning 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've learned: CSS relative positioning is the initial position of the "relative" element in the document, while CSS absolute positioning is "relative" to the nearest positioned ancestor element, and if there is no positioned ancestor element, then "relative" to the original inclusion block.

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

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

This is the end of the article on "what is the difference between relative positioning and absolute positioning in CSS". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the difference between relative positioning and absolute positioning in CSS". If you want to learn more knowledge, you are 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.