Calculation of the percentage value when the CSS position property is absolute

Time:2019-11-30

When the position is absolute, the percentage of its related attributes is calculated and rendered relative to the elements (including blocks) it references.

First of all, we must know:

1. [reference of percentage] [1]:

Calculate the percentage value according to the containing block (1) the margin / padding / left / right / width of the element is calculated by referring to the width of the containing block; (2) the percentage value in height / top and bottom is calculated by the height of the containing block. If the height value of the containing block changes according to its content, and the value of the position attribute of the containing block is given relative or static, then the calculated value of these values is 0.

2. [confirm include block] [2]:

The process of determining the containing block of an element completely depends on the position attribute of the element:

(1) if the position attribute is static or relative, the containing block is composed of its nearest “ancestor block element” (such as inline block, block or list item element) or the edge of the content area of the formatting context (such as a table container, flex container, grid container, or the block container itself).

(2) if the position attribute is absolute, the containing block is composed of the edge of padding left + content + padding right of the inner margin area of the ancestor element whose nearest position value is not static (that is, the value is fixed, absolute, relative or sticky).

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
     body {
  color: orange;
}
div {

  position: absolute; 
  /*Box sizing: border box; / * content = (width border padding) when box sizing: border box; width = content when not*/*/
  width: 400px;
  border: 5px solid orange;
  padding: 50px;
  height: 160px;
  background: lightgray;
}

p {
  Position: absolute; / * contains the inner margin edge (padding left + content + padding right) of the nearest ancestor element (block or not);
  width: 50%;   /* == (50+400+50)px * 50% = 250px */
  height: 25%;  /* == (50+160+50)px * 25% = 65px */
  margin: 5%;   /* == (50+400+50)px * 5% = 25px */
  border: 5px solid orange;
  padding: 5%;  /* == (50+400+50)px * 5% = 25px */
  background: pink;
  color: green;
}
/*p {
   /*The containing block is composed of the nearest ancestor block element (only block element) or the edge of the content area of the formatting context;
  width: 50%;   /* == 400px * 50% = 200px */
  height: 25%;  /* == 160px * 25% = 40px */
  margin: 5%;   /* == 400px * 5% = 20px */
  border: 5px solid orange;
  padding: 5%;  /* == 400px * 5% = 20px */
  background: pink;
  color: green;
}*/
    
    </style>
</head>
<body>
    <div>
        <p>This is a paragraph!</p>
    </div>
</body>
</html>

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.