Login/Register
Is `position: fixed` on `<body>` problematic?
Asked Answered
Solved htmlcsscss-positionabsolutedocument-body
T

1

1

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>

Traylor answered 2/6, 2016 at 6:56 Comment(1)
I have not heard any. – Bautram
P
1

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>
Popup answered 2/6, 2016 at 7:10 Comment(1)
Does someone is still supporting <= IE6? – Bautram

© 2022 - 2024 — McMap. All rights reserved.