If a parent element is somehow transformed in a fixed element, then this very fixed element behaves as absolutely positioned. Why? How to avoid it?
In the example, if you scroll the page and click (thereby simply shifting the entire wrapper to the right), then the fixed element goes up, as if it takes the value 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> 
