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
Recommend
Solution to the error problem of Vscode remotely connecting to Ubuntu
1. Background of the incident: Because of work ne...
How to perfectly implement the grid layout with intervals on the page
Typical layout examples As shown in the above pic...
Detailed explanation of scp and sftp commands under Linux
Table of contents Preface 1. scp usage 2. Use sft...
js realizes a gradually increasing digital animation
Table of contents background Achieve a similar ef...
Elementui exports data to xlsx and excel tables
Recently, I learned about the Vue project and cam...
Detailed explanation of Tomcat directory structure
Table of contents Directory Structure bin directo...
In-depth analysis of MySQL deadlock issues
Preface If our business is at a very early stage ...
MySQL paging query optimization techniques
In applications with paging queries, queries that...
HTML table markup tutorial (48): CSS modified table
<br />Now let's take a look at how to cl...
Detailed explanation of the this pointing problem of JavaScript prototype objects
Table of contents 1. this points to 2. Modify thi...
How to run sudo command without entering password in Linux
The sudo command allows a trusted user to run a p...
Apply provide and inject to refresh Vue page method
Table of contents Method 1: Call the function dir...
Solution to the conflict between Linux kernel and SVN versions
Phenomenon The system could compile the Linux sys...
Javascript combined with Vue to achieve automatic path finding for any maze image
Table of contents Preface Two-dimensional array, ...
25 fresh useful icon sets for download abroad
1. E-Commerce Icons 2. Icon Sweets 2 3. Mobile Ph...