How to change fixed positioning of child elements to absolute positioning by CSS3 transform
|
This article introduces the method of using CSS3 transform to change the fixed positioning of child elements to absolute positioning. I would like to share it with you and also leave a note for myself for easy searching.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #f60; // orange}
.parent {
position: fixed;
width: 300px;
height: 300px;
right: 0;
top: 0;
background: #02bd00; // green transform: translateX(0);
}
.child {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.2); // black transparent: mask}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>It is not easy to find the cause of the problem for students who have never encountered it. Here is a picture to show the effect (only the green part is masked, but we may think that there is nothing wrong with our writing.)
In fact, if we want the full-screen effect of the sub-element, we need to set transform: none;
The problem is quite typical: Setting a valid transform attribute on the parent element will cause the child element to be fixed as an absolute element, which will cause the child element to be the same size as the parent element. At this time, the offsetTop and offsetLeft of the child element are both 0, which requires attention. This is the end of this article about how to use CSS3 transform to change sub-element fixed positioning to absolute positioning. For more relevant CSS3 transform sub-element fixed content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Serial and parallel operations in JavaScript
>>: A detailed introduction to seata docker high availability deployment
Recommend
43 Web Design Mistakes Web Designers Should Watch Out For
This is an article about website usability. The a...
Solve the problem that the time zone cannot be set in Linux environment
When changing the time zone under Linux, it is al...
Uniapp realizes sliding scoring effect
This article shares the specific code of uniapp t...
SQL insert into statement writing method explanation
Method 1: INSERT INTO t1(field1,field2) VALUE(v00...
Detailed explanation of how to pass values between react hooks components (using ts)
Table of contents From father to son From son to ...
Detailed explanation of the implementation method of database multi-table connection query
Detailed explanation of the implementation method...
4 principles for clean and beautiful web design
This article will discuss these 4 principles as t...
Detailed graphic explanation of sqlmap injection
Table of contents 1. We found that this website m...
Ten important questions for learning the basics of Javascript
Table of contents 1. What is Javascript? 2. What ...
How to implement Docker container self-start
Container auto-start Docker provides a restart po...
Share some key interview questions about MySQL index
Preface An index is a data structure that sorts o...
Comparison of mydumper and mysqldump in mysql
If you only want to back up a few tables or a sin...
How to install and configure Redis in CentOS7
Introduction There is no need to introduce Redis ...
JS array deduplication details
Table of contents 1 Test Cases 2 JS array dedupli...
mysql8.0 windows x64 zip package installation and configuration tutorial
MySQL 8 Windows version zip installation steps (d...