Search code examples
htmlcsscss-positionabsolutedocument-body

Is `position: fixed` on `<body>` problematic?

On a SPA for mobile devices and desktop browsers I need to set position: fixed on <body> to avoid iOS' overflow/rubberband scrolling.

position: fixed and modifications on the <body> are always somewhat hacky and risky to cause problems.

This is why I wanted to clarify:

Are there any known problems / caveats / things to watch out for (i.e. stacking context, z-indexing context, static/relative/absolute/fixed positioning on children) / ... when adding position: fixed to <body>

Solution

  • The "position: fixed" relates to an "element" positioned relative to the browser window. Webpage browser zooming is affected by it. IE6 and below will also break with it.

    Perhaps it would be better as:

    html, body { height: 100%; overflow: auto; }

body .element { position:fixed; bottom: 0; }

    Then for the html:

    <body>
<div class="element">
    (everything else inside here)
</div>
</body>