CSS Absolute Positioning

The element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block. The space originally occupied by the element in the normal document flow is closed, as if the element did not exist originally. After positioning, an inline-block box is generated, 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 occupy space. This is different from relative positioning, which is actually considered 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 the normal flow is as if the absolutely positioned elements do not exist:

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

as shown in the following figure:

CSS Absolute Positioning Example

The position of the absolutely positioned element is relative tothe nearest positioned ancestor element, if the element does not have a positioned ancestor element, then its position is relative toThe Initial Containing Block.

The main issue for positioning is to remember the meaning of each type of positioning. So, let's review what we have learned now: relative positioning is 'relative to' the initial position of the element in the document, while absolute positioning is 'relative to' the nearest positioned ancestor element. If there is no positioned ancestor element, it is 'relative to' the initial containing block.

Note:The initial containing block may be the canvas or HTML element depending on the user agent.

Tip:Because absolutely positioned boxes are not related to the document flow, they can cover other elements on the page. They can be set through z-index Propertyto control the stacking order of these boxes.

CSS Absolute Positioning Example

Position: Absolute Positioning
This example demonstrates how to use absolute values to position elements.