What is replaced absolutely-positioned boxes in css?-CodePudding

Background

I'm making Flex component in React.

const Flex: React.FC<FlexBoxProps> = ({
  children,
  fluid = false,
  alignItems = 'normal',
  justifyContent = 'normal',
  flexDirection = 'row',
  flexWrap = 'nowrap',
  rowGap = '0',
  columnGap = '0',
  ...
}) => {

Problem

I found that default value of alignItems is normal in mdn.

But, I can't understand the explanation of normal property.
For example,

In absolutely-positioned layouts,   
the keyword behaves like start on replaced absolutely-positioned boxes,   
and as stretch on all other absolutely-positioned boxes.

What is the replaced absolutely-positioned boxes in this context ?

CodePudding user response：

Replaced elements are elements like <img> where the contents of the rendered box aren't affected by CSS. Absolutely positioned boxes are those with a computed value for the position property is absolute.

replaced absolutely-positioned boxes are boxes which meet both those conditions.

CodePudding user response：

A replaced element is an element whose content is outside the scope of the document's CSS.

So, for example, an iframe, img or video element which, being "imported" into your document, is not affected by the document's CSS.

A non-replaced element is an intrinsic part of the document and recognizes the document's CSS.

Hence, an absolutely-positioned replaced element is an absolutely-positioned img, canvas, video or iframe. Being a replaced element, it won't recognize the document's styles. On these elements, normal behaves like start.

On other absolutely-positioned elements (non-replaced), normal behaves like stretch.

More details in the specs:

CodePudding user response：

I'm not 100% positive, but this may be referring to using the display property to change how an element is rendered. For example, display:contents would change the box-model of an element. See: https://developer.mozilla.org/en-US/docs/Web/CSS/display-box.