What happens to fixed daughters in the transformation of their parent?

[Alberto]

If a fixed parent is transformed somehow, this very fixed element shall act as completely positioned. Why? How do we avoid that?

In the example, if you cover the page and click (this is the simplest thing to move the whole lap to the right), the fixed element goes upstairs as if it takes the position: absolute.

$('.wrapper').click(function() {
  $(this).toggleClass('slide');
});

* {
  margin: 0;
  padding: 0;
}
.fixed {

position: fixed;

top: 20px;

left: 20px;

height: 30px;

padding: 8px;

line-height: 30px;

background-color: #444;

color: #fff;

}

.slide {

transform: translate(100px, 0);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">

<div class="for_scroll">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor

sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing

elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates

similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit

consequatur aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur

aliquam totam, aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam,

aperiam autem, est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem,

est reiciendis accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis

accusantium rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates similique reprehenderit consequatur aliquam totam, aperiam autem, est reiciendis accusantium

rerum nobis. Quisquam quas porro et tenetur eius. Possimus dolorum, aut.

</div>

<div class="fixed">

I'm fixed! What's going on?

</div>

</div>

[inna]

It happens because transform new coordinate system

http://www.w3.org/TR/css3-2d-transforms/#transform-rendering