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
  1. Alex Williams

    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 :(

  2. G

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *