Calculation of percentage value when the css position property is absolute

When position is absolute, the percentage of its related attributes is calculated relative to the element it refers to (the containing block) and the position is rendered.

First we must know:

1. [Percentage reference][1]:

Calculating percentages based on the containing block: (1) The element's margin/padding/left/right/width are calculated with reference to the width of the containing block; (2) To calculate percentages for height/top and bottom, the height of the containing block is used. If the containing block's height varies based on its content, and the containing block's position property is assigned a value of relative or static , then these values compute to 0.

2. [Determine the containing block][2]:

The process of determining an element's containing block depends entirely on the element's position property:

(1) If the position property is static or relative, the containing block consists of the edge of the content area of its nearest "ancestor block element" (such as an inline-block, block, or list-item element) or formatting context (such as a table container, flex container, grid container, or the block container itself).

(2) If the position property is absolute, the containing block consists of the edges of the padding area (padding-left + content + padding-right) of its nearest ancestor element whose 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 adding box-sizing: border-box;; width=content when not adding*/*/
  width: 400px;
  border: 5px solid orange;
  padding: 50px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute; /* The containing block consists of the padding edges (padding-left + content + padding-right) of the nearest ancestor element (which may or may not be a block element);
  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 consists of the nearest ancestor block element (which can only be a block element) or the edge of the content area of the formatting context (content);
  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 full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: What you need to know about creating MySQL indexes

>>: Understanding of web design layout