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

Quickly install MySQL5.7 compressed package on Windows

Calculation of percentage value when the css position property is absolute

Quickly install MySQL5.7 compressed package on Windows

Get a list of your top 10 most frequently used terminal commands in Linux

Solution to forgetting mysql database password

Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration

Using vue3 to implement counting function component encapsulation example

Web Design Skills: High Ranking Problems of Mixed Chinese and English Web Pages

A brief discussion on the maximum number of open files for MySQL system users

Using js to achieve the effect of carousel

Tutorial on how to install and configure the unzipped version of MySql under Windows 10

Detailed explanation of DOM style setting in four react components

Recommend

Analyzing the troublesome Aborted warning in MySQL through case studies

How to delete garbled or special character files in Linux

Detailed explanation of the differences between js array find, some, filter, and reduce

JS implements a stopwatch timer

How to handle the loss of parameters when refreshing the page when passing parameters to vue router

Analysis of the issues and solutions for repeated submission, repeated refresh, and backoff prevention

Sample code for implementing history in vuex

CentOS6 upgrade glibc operation steps

MySQL uses events to complete scheduled tasks

Problems encountered in using MySQL

Interpretation of the module for load balancing using nginx

How to delete the container created in Docker

Practical record of vue using echarts word cloud chart

mysql5.7.14 decompression version installation and configuration method graphic tutorial (win10)

Several ways to store images in MySQL database