What is the HTML css absolute positioning?

Is set to absolute positioning element block flow completely removed from the document, and positioned relative to its containing block, the block may contain another element in the document is initially contained or blocks.

Original elements in the normal flow of the document space occupied will be closed, as if the elements were not there originally. Generating a block-level element positioned after the frame, regardless of what type of frame it had generated in the normal stream. (Recommended Learning: CSS Tutorial  )

CSS absolute positioning

Absolute positioning the position of the document element is independent of flow, and therefore does not occupy space. This relative positioning of the different, in fact, be considered part of the relative positioning of the normal stream localization model, since the position of the element relative to its normal position in the stream.

Normal flow layout of other elements like the absolutely positioned element does not exist:

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

As shown below:

cj-6.gif

Position absolute positioning of elements relative to the nearest positioned ancestor element, if the element has no positioned ancestor element, its position relative to the initial containing block.

The main problem for positioning to remember the meaning of each location. So now let us review the knowledge learned it: the relative position is the initial position "relative to" elements in the document, and the absolute position is "opposed to" ancestor nearest positioned ancestor, if there is already targeted element, then the "relative to" the first block comprises.

NOTE: The different user agent, comprising the first block may be canvas or HTML elements.

Tip: Because absolutely positioned box has nothing to do with the document flow, so they can cover other elements on the page. The order of stacking can be controlled by setting the frame z-index attribute.

Guess you like

Origin www.cnblogs.com/mo3408/p/12156478.html