Fixed elements are out of browser's screen

Question

I have two position: fixed; divs. Everything works fine until I zoom up the page. Normally when you zoom up page two sliders appear that allow you to see the rest of the page that is out of your screen. However, for some reason if those two divs that have fixed position are out of screen the browser doesn't allow to scroll to them.

This doesn't happen if the divs don't have fixed position. Is there ANY solution besides changing position to relative?

Possible duplicate of [Fixed position div scrollable](http://stackoverflow.com/questions/18894400/fixed-position-div-scrollable) — pol, Dec 29 '16 at 20:42
That is because the fixed divs are outside the flow of the doc, and I'm assuming that you're using fixed values to position them as well. Since you don't provide any code, it's impossible to help. — junkfoodjunkie, Dec 29 '16 at 20:46
OK, I posted that as an answer. And an explanation why there are no scrollbars if the block is fixed. — Mr Lister, Dec 29 '16 at 21:05

score 3 · Accepted Answer · answered Dec 29 '16 at 21:04

Fixed positioning means that the element is on a fixed position on the screen, no matter if you scroll or not.
In other words, the scrollbars (if any) won't have an effect on the fixed element.
So even if a browser would put scrollbars on the window if the fixed element came out larger, using those scrollbars would not scroll the fixed element into view!
So, no scrollbars. They would be useless.

One solution is to use position: absolute instead of position: fixed. Absolutely positioned elements do scroll with the page, so the scrollbars do work.

<div style="position: absolute; margin-left: 50px; margin-top: 50px; width: 300px; height: 300px; background-color: blue;">


</div>

Fixed elements are out of browser's screen

1 Answers1