CSS3: Transform causes the fixed positioning of child elements to become absolute positioning

Time:2020-11-28
<!DOCTYPE html>
<html>
<head>
<style>
   body {
    Background: ᦇ 60; // 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 out the reason for the problem relative to the students who have not met it. Post a picture to see the effect (only the green part has a mask, but we may think our writing is OK.)
CSS3: Transform causes the fixed positioning of child elements to become absolute positioning

In fact, we need to set transform: none for the full screen effect of sub elements;
CSS3: Transform causes the fixed positioning of child elements to become absolute positioning

The problem is typical: setting a valid transform attribute on the parent element will cause the child element to be fixed into an absolute element, which will result in the same size of the child element and the parent element. At this time, it is necessary to note that the offsettop and offsetleft of the child element are both 0.
Appearance scene: it usually appears when the style is customized and added based on the framework UI.