Fixed element inside an animated element

Question

I want to highlight an input by applying an overlay to the whole page and giving the input relative position and Z index higher than the overlay.

.overlay {
  position: fixed;
  z-index: 1;

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);      
}

.is-highlighted {
  position:relative;
  z-index:2;
}

Something like the following:

It all works well until I give the white card an animation. Then, the fixed overlay only lays over the card, not the whole page:

Here's a fiddle showing the case: https://jsfiddle.net/ys5jot5s/1/

Commenting out the animation makes the overlay position itself correctly.

How can I make the overlay fill up the whole page? Alternatively I have tried to throw the overlay outside of the card, but then I can't seem to make the input pop in front of it.

Possible duplicate of [Positions fixed doesn't work when using -webkit-transform](https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform) — Temani Afif, Dec 20 '17 at 10:31

score 2 · Accepted Answer · answered Dec 20 '17 at 10:50

Transform property creates a new local coordinate system, which means fixed element becomes fixed to the transformed element.

https://w3.org/TR/css-transforms-1/#transform-rendering

One solution would be move overlay and add to card its own overlay.

.container {
  padding: 2rem;
  background-color: rgb(239, 96, 48);
}

@keyframes slide-down {
  0% {
    transform: translate(0, -1rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.card {
  padding: 1rem;
  background-color: white;
  animation: slide-down 0.8s normal forwards;
  position: relative;
  z-index: 3;
}

.card::before {
    content: "";
    background: rgba(0,0,0,.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.is-highlighted {
  position:relative;
  z-index:2;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  
  transition: 0.8s all;
}

<div class="container">
  <div class="card">
    <textarea rows="6" placeholder="Not highlighted"></textarea>
    <textarea rows="6" class="is-highlighted" placeholder="Highlighted"></textarea>  
  </div>
  <div class="overlay"></div>  
</div>

Thank you. In my case, the .card::before is already used for something else but I can just put two overlay divs, one global and one inside the card. — Kuba Szymanowski, Dec 20 '17 at 11:08

Fixed element inside an animated element

1 Answers1