css – What happens to fixed children when the parent transforms?

Question:

If the parent of a fixed element is somehow transformed, then this very fixed element behaves as absolutely positioned. Why? How can you avoid this?

In the example, if you scroll the page and click (thereby simply shifting the entire wrapper to the right), then the fixed element goes to the top, as if it takes the value of 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>

Answer:

This is because transform creates a new coordinate system

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

Scroll to Top