-1

.two overrides .one according to the code here. if we remove the transform: translateY(-40px), .one overrides .two accordingly. What makes the transform: translateY(-40px) in .two to override the .one which didn't happen before applying the transform property.

div {
  width: 150px;
  height: 150px;
  display: inline-block;
}

.one {
  background: red;
  transform: translateX(50%);
}

.two {
  background: green;
  transform: translateY(-40px);
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
rx2347
  • 1,071
  • 1
  • 6
  • 26
Samrudh S
  • 33
  • 6
  • I would look at the devtools in chrome or whatever browser you are using to figure this out. It should have no effect on it but see what is getting applied to that class when the dom loads. – Will 40 May 11 '23 at 18:55

1 Answers1

-1

If I understand the question correctly: elements with transform (except transform: none) automatically have a stacking context (the order in which the elements are displayed). Therefore, when you remove the transform from the second element, its stacking context disappears and it automatically becomes "lower" than the element with the overlay context.

To manually enable the stacking context you can use position: relative, and if you need to control the stacking context of such an element, you can optionally use z-index: N (where N is an integer)

I recommend that you read this article and it will become clearer to you: https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Alex Shink
  • 318
  • 7
  • 10
  • Is it because under the current spec of CSS, for any element, creating a new stacking context is equivalent to being painted as if it's positioned ? Here element that has transform creates stacking context which behaves as a positioned element when it comes to stacking context. And since positioned elements are placed above non positioned elements, the element that has transform property here will be placed above the element that does not have a stacking context. – Samrudh S May 28 '23 at 13:39
  • Yes, that's right. – Alex Shink May 29 '23 at 14:42