0

So, I found out that if you have nested fixed elements, and the parent has a transform, then the children acts as an absolute element instead of a fixed element.

Nested fixed element without transform :

.parent {
  position: fixed;
  background-color: red;
  width: 100px;
  height: 100px;
  top: 50px;
  left:50px;
}

.children {
  position: fixed;
  background-color: blue;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
}
<div class="parent">
  <div class="children"></div>
</div>

Nested fixed element with transform on parent :

.parent {
  position: fixed;
  background-color: red;
  width: 100px;
  height: 100px;
  top: 50px;
  left:50px;
}

.children {
  position: fixed;
  background-color: blue;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
}

.translate {
  transform: translate(10px, 0);
 }
<div class="parent translate">
    <div class="children"></div>
</div>

However I still want the children to be placed like in the first code snippet but with a transform on the parent, any ideas ?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Neiluj
  • 91
  • 4
  • the duplicate deals with filter but it lists all the properties that do the same including transform – Temani Afif Jul 15 '22 at 13:21
  • and if you cannot remove transform OR make the element outside then you have no way to achieve what you want – Temani Afif Jul 15 '22 at 13:22
  • Alright thank you, the best solution for me is to make the element outside even though I was hoping for something else. – Neiluj Jul 15 '22 at 13:30

0 Answers0