0

translate3d(0%, 0px, 0px); Brakes my Position fixed. On my demo you should see that the Content on click opens up fine but it should be stuck to the top in position fixed.

So, scrolling down with my container (placekitten images) then click the button, the hidden content should open up always with the Google image stuck on the top.

<html>
<div class="container">placekitten images</div>
<button>LOADED-CONTENT comes in translate3d(0%, 0px, 0px)</button>
</html>

<html>
<div class="sticky">Google  image always on top.</div>
<button>back button slides the loaded content translate3d(100%, 0px, 0px)</button>
</html>

translate3d brakes the position fixed!!! How can I fix this?

http://jsfiddle.net/J7p99/

  • possible duplicate of [How to open an hidden div and keep it on top of the page like in fix position](http://stackoverflow.com/questions/23057312/how-to-open-an-hidden-div-and-keep-it-on-top-of-the-page-like-in-fix-position) – Just code Apr 14 '14 at 13:26
  • Actually I found out that translate3d brakes the position! so Its a different question. Really redundant saying that its a duplicate! –  Apr 14 '14 at 13:27

1 Answers1

0

Possible repeat

In summation, a translate3d creates a new local coordinate system, which overrides any position attribute you have set!

In essence, instead of being fixed to the viewport as you want it to (In this case stay to the top) it is fixed the the translated element!

I was able to find this however, it is a fixed top bar with translate3d(0,0,0)

I hope this helps!

Community
  • 1
  • 1
Ian Ryan Clarke
  • 268
  • 1
  • 8
  • I'll have a look! I came across too to this link. let me see. Thanks, for your help. –  Apr 14 '14 at 13:40