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
Example of integrating Kafka with Nginx
background nginx-kafka-module is a plug-in for ng...
A brief discussion on how to set CSS position absolute relative to the parent element
As we all know, the CSS position absolute is set ...
XHTML 1.0 Reference
Arrange by functionNN : Indicates which earlier ve...
Docker container monitoring and log management implementation process analysis
When the scale of Docker deployment becomes large...
Vue uses GraphVis to develop an infinitely expanded relationship graph
1. Go to the GraphVis official website to downloa...
Python connects to the database MySQL decompressed version installation configuration and encountered problems
introduction Today I learned how to connect to th...
Tutorial on installing jdk1.8 on ubuntu14.04
1. Download jdk download address我下載的是jdk-8u221-li...
mysql-8.0.15-winx64 decompression version installation tutorial and three ways to exit
1. Download from the official website and unzip h...
Install JDK1.8 in Linux environment
Table of contents 1. Installation Environment 2. ...
Analysis and summary of the impact of MySQL transactions on efficiency
1. Database transactions will reduce database per...
Mysql solves the database N+1 query problem
Introduction In orm frameworks, such as hibernate...
How to delete a property of an object in JavaScript
1. delete delete is the only real way to remove a...
Implementation of mysql8.0.11 data directory migration
The default storage directory of mysql is /var/li...
How to implement a password strength detector in react
Table of contents Preface use Component Writing D...
JS+Canvas realizes dynamic clock effect
A dynamic clock demo based on Canvas is provided ...