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
MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control
Table of contents 1. Concurrent access control 2....
Detailed explanation of various usages of proxy_pass in nginx
Table of contents Proxy forwarding rules The firs...
What does the legendary VUE syntax sugar do?
Table of contents 1. What is syntactic sugar? 2. ...
Nginx rewrite regular matching rewriting method example
Nginx's rewrite function supports regular mat...
Detailed explanation of React component communication
Table of contents Component Communication Introdu...
MySQL 5.7.16 free installation version graphic tutorial under Linux
This article shares the MySQL 5.7.16 free install...
Centos 7 64-bit desktop version installation graphic tutorial
If you think the system is slow and want to chang...
The implementation principle of Vue router-view and router-link
use <div id="app"> <router-lin...
Detailed Analysis of or, in, union and Index Optimization in MySQL
This article originated from the homework assignm...
Example of implementing hollow triangle arrow and X icon with after pseudo element
In the front-end design draft, you can often see ...
JavaScript to achieve accordion effect
This article shares the specific code for JavaScr...
Tips for making web table frames
<br />Tips for making web table frames. ----...
RHEL7.5 mysql 8.0.11 installation tutorial
This article records the installation tutorial of...
HTML left and right layout example code
CSS: Copy code The code is as follows: html,body{ ...
Centos7 implements sample code for restoring data based on MySQL logs
Introduction Binlog logs, that is, binary log fil...