CSS Fixed Positioning in Email
Update Sept 2016: Unfortunately iOS10 no longer supports fixed positioning. A different way to approximate fixed positioning in email is using this “Faux” Fixed technique.
Its one of the least understood CSS styles in email and also one of the most quirky – especially when it comes to iOS. The iOS Mail toolbars will obscure fixed positioning elements set to the very edge and z-indexes don’t work reliably. However with patience you can do some cool things with fixed positioning.
Find out the various quirks of fixed positioning as well as a cool Taco Bell email example at the Email on Acid Blog.
Latest Comments
The position property isn’t supported in iOS 10 Mail.app as of beta 8. Hopefully it gets added back in, but we’re getting pretty close to GM :(
Yeah Geoff from Email on Acid wrote about it as well. You win some (Video) you lose some (Fixed). https://www.emailonacid.com/blog/article/email-development/what-to-expect-when-youre-expecting-ios-10
Fixed positioning is actually a ball of wax in iOS if you’re trying to do complex design so I’m not too sad if its no longer supported.
Hi Justin,
Reading your article, I tried to see if I could make a CTA button fixed at the top of the viewport in mobile. The CTA is kept hidden in desktop, but appears correctly positioned at the top in mobile view. Only problem is it doesn’t stay fixed. It scroll with the content. Im at a loss as to next steps. Any ideas or suggestions?
Hey G,
The reason it doesn’t stay fixed is that iOS appears to convert fixed positioning to absolute positioning.
Here’s another technique that you can try: http://freshinbox.com/blog/faux-fixed-interactive-email-scrolling-technique/