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

Teach you how to implement Vue3 Reactivity

Calculation of percentage value when the css position property is absolute

Teach you how to implement Vue3 Reactivity

Detailed explanation of three ways to import CSS files

The big role of HTML meta

Javascript tree menu (11 items)

Summary of the differences between get and post requests in Vue

Steps to transfer files and folders between two Linux servers

Solution to the problem that the background image of a label does not display in IE8

Vue3 list interface data display details

Basic application methods of javascript embedded and external links

jQuery implements percentage scoring progress bar

Recommend

How to view Docker container application logs

Details on using regular expressions in MySQL

Tutorial analysis of quick installation of mysql5.7 based on centos7

Detailed explanation of the two modes of Router routing in Vue: hash and history

Learn to deploy microservices with docker in ten minutes

vue+springboot realizes login verification code

Mount the disk in a directory under Ubuntu 18.04

Implementation of vscode custom vue template

What to do if you forget your mysql password

Vue realizes price calendar effect

Use Meta tag code to set 360 Dual-core Browser to default to high-speed mode instead of compatible mode

jQuery to achieve sliding stairs effect

The meaning of status code in HTTP protocol

MySQL constraint types and examples

Detailed explanation of using top command to analyze Linux system performance