Hiding all fixed-position elements

Question

I'm sick of webpages that show a fixed element that always follow you on the screen, and sometimes partially block the view of the page. (Example.) I want to make a custom CSS rule to add to Chrome that would set display: none; to all elements that have position: fixed;

Is this possible? How?

you can just delete the nodes with dev tools or set them as position: relative. clearly, this really isn't a big deal. — agconti, Dec 20 '13 at 20:46
Have you seen https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha? May help — Yuriy Galanter, Dec 20 '13 at 20:47
I suppose you could do something absurd like this ... * {position:relative !important;} ;) — cpreid, Dec 20 '13 at 20:49
@agconti I meant I want this done automatically to every element that has `position: fixed;` in the page. Can your solution do that? — Ram Rachum, Dec 20 '13 at 21:05
since a lot of pages use fixed menus, you may just make sites unnavigateable. not sure that is a good idea. Would make more sense to force the fixed position elements top render as absolute instead. — Thomas Cheney, Dec 20 '13 at 21:10
@ram yeah. Just do it automatically when you get to the page. — agconti, Dec 20 '13 at 22:52

score 1 · Accepted Answer · edited May 23 '17 at 12:19

IMO, the easiest way to create what you want is to make a bookmarklet to hide all fixed elements. It won't run automatically on every page, but you can click on it whenever something's annoying you.

I used Ben Alman's jQuery bookmarklet generator with a filter from this existing Stack Overflow question.

$('*').filter(function() {
    return $(this).css("position") === 'fixed';
}).hide();

I minified the code, generated the bookmarklet, then dragged the bookmarklet to my toolbar and, bam, instant tool.

If you really want this to run automatically on every page, you could check out TamperMonkey and use the same script.

Hiding all fixed-position elements

1 Answers1