CSS Filter Cancels Element Position

CSS Filter cancels element position

That's because absolutely positioned elements are positioned relatively to their containing block, which is established by their nearest positioned ancestor, or the initial containing block if there is no such ancestor.

Then, if you don't use filter, the containing block will be the initial one, which has the same dimensions as the viewport.

However, if you use filter on body, that will establish a containing block, even for absolutely positioned descendants. It will be like if you used position: relative.

body {

  position: relative;

}

div {

  background: blue;

  margin: auto;

  position: absolute;

  right: 0;

  top: 50%;

  left: 0;

  height: 200px;

  width: 200px;

  transform: translateY(-50%);

}

<div></div>

Why does applying a CSS-Filter on the parent break the child positioning?

If we refer to the specification we can read:

A value other than none for the filter property results in the
creation of a containing block for absolute and fixed positioned
descendants unless the element it applies to is a document root
element in the current browsing context. The list of functions are
applied in the order provided.

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport. In other words, it's still fixed but inside its new containing block (the filtered container)

Here is a simplified version to illustrate the issue:

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}

<div class="container">
  <div>I am fixed on scroll</div>
</div>

<div class="container" style="filter:grayscale(1);">
  <div>I move with the scroll</div>
</div>

CSS filter causing positioning issues

This will solve your issue.

html {

  filter: brightness(120%);

}

.tab {

  position: fixed;

  bottom: 0px;

  width: 100%;

  color: #fff;

  background-color: red;

}

<html>

<body>

  SCROLL TO BOTTOM, notice the red div<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id turpis dolor. Etiam eu erat et orci volutpat malesuada et nec sem. Curabitur eu neque eu augue lobortis laoreet. Morbi malesuada, ligula sed

  facilisis sodales, justo augue porta massa, a posuere nisi ex et turpis. Donec viverra in diam in cursus. Vivamus laoreet luctus lacus, non dictum odio efficitur a. Nunc varius neque hendrerit velit viverra maximus. Quisque fermentum vestibulum odio,

  sit amet feugiat urna cursus vitae. Praesent et convallis est, in bibendum diam. Vivamus auctor dignissim justo, sed hendrerit lectus vehicula eu. Sed gravida tempus ex, a volutpat justo convallis aliquet.<br><br> Pellentesque id tristique dui. Vivamus

  rutrum nisi turpis, ut interdum ex fringilla sit amet. Curabitur ac ornare ligula. Etiam congue tempus turpis, eu pulvinar est scelerisque at. Donec at malesuada libero. Nulla suscipit lorem ac tincidunt lacinia. Cras tincidunt odio dui, vel egestas

  purus efficitur eu. Curabitur luctus, augue et iaculis malesuada, augue tellus aliquam lacus, et tincidunt libero quam sit amet ante. Quisque non tortor nisl. Donec ullamcorper in neque id sagittis. Vestibulum sagittis nulla sed turpis rutrum tempus.

  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sed pellentesque mi. In semper ornare accumsan. Aenean quis nunc aliquam, venenatis elit nec, imperdiet lorem. Nullam erat lacus, sagittis ornare

  vehicula id, rutrum non ipsum.<br><br> Duis ornare viverra ex, a lobortis est consequat ornare. Fusce ultricies nisi vel ipsum venenatis convallis. Nulla cursus elit quis lobortis ornare. Suspendisse accumsan nisi sed ligula vulputate ultrices. Proin

  ultrices euismod laoreet. Aliquam in leo vitae ligula sollicitudin dapibus. Quisque semper ante sed nisi porta, sed tincidunt dui varius. Integer eleifend condimentum augue, at gravida nisl tempus eget. Pellentesque habitant morbi tristique senectus

  et netus et malesuada fames ac turpis egestas. Maecenas suscipit dui sit amet pulvinar fermentum. Aenean molestie turpis vel tempus venenatis. Vivamus arcu nisl, lobortis at auctor sit amet, iaculis sit amet arcu.<br><br> Nulla sodales efficitur malesuada.

  Nunc eros arcu, condimentum id quam eu, convallis mollis odio. Mauris at mollis ante. Donec pharetra justo sit amet nisl volutpat, quis congue est fermentum. Aliquam erat volutpat. Curabitur id nisi sit amet tortor vestibulum ultricies. Praesent a malesuada

  nisl. Integer sodales mauris a ornare egestas. Nam eu massa metus. Duis sed ipsum quam. Etiam ultricies diam ac sodales suscipit. Nullam molestie metus et tincidunt dictum. Suspendisse consectetur dictum sem in lacinia. Nullam sed massa gravida, commodo

  nisi id, suscipit urna. Integer tristique ante consequat lectus luctus, vel aliquet erat sagittis. Fusce suscipit ut arcu at blandit.<br><br> Vivamus et blandit urna. Maecenas quis metus sit amet velit fringilla ullamcorper. Sed iaculis odio leo, non

  consequat risus ultrices sit amet. Maecenas ac mi metus. Phasellus vitae erat fringilla mauris lacinia suscipit sit amet et elit. Pellentesque sit amet quam a purus pretium ornare. Maecenas in efficitur nisl, in imperdiet ligula. Quisque sit amet commodo

  quam. In vehicula turpis nec pretium sagittis.<br><br> Maecenas consequat ante in quam aliquam lobortis. Duis pellentesque ornare quam, sit amet maximus sapien imperdiet sed. Praesent eu lacinia dolor. Proin cursus dapibus dui. Nunc rhoncus augue ipsum.

  In mollis urna eget nibh luctus convallis. Nam lectus mi, bibendum vehicula cursus id, ornare eget arcu. Fusce fringilla justo vestibulum orci eleifend, aliquam egestas nunc sodales. Praesent a neque non ex blandit sodales. Integer sit amet convallis

  sem, sed cursus diam. Aenean nec pulvinar sem.<br><br> Cras facilisis, sapien vitae dictum fringilla, felis nisl rhoncus ligula, sed iaculis enim ante ornare est. Suspendisse non sapien leo. Curabitur fringilla semper nisl et blandit. Nam consequat

  faucibus imperdiet. Pellentesque eu risus ornare, luctus sapien vitae, placerat ipsum. Donec iaculis purus ac elit pellentesque, eu eleifend elit iaculis. Integer interdum, lorem at hendrerit bibendum, leo magna luctus risus, quis egestas velit lacus

  at nibh. Nullam mollis placerat metus, nec pretium tortor bibendum ac.<br><br> Nulla quam lacus, rutrum sed imperdiet sit amet, congue in elit. Proin in arcu auctor, gravida libero sed, efficitur ligula. Cras vitae sollicitudin lacus. Nam fermentum

  ultrices diam, sit amet fermentum nibh vehicula non. Phasellus quis maximus lacus, non rutrum massa. Ut vitae dolor sit amet quam egestas sodales in a tellus. Sed consequat justo sed ipsum vehicula, a elementum velit iaculis. Etiam luctus libero sit

  amet pellentesque finibus. Nunc metus velit, accumsan ac congue at, luctus sit amet magna. Sed consectetur lacinia urna, eget elementum massa ultricies id. Duis ut congue ante. Proin sodales feugiat dignissim. Cras urna orci, luctus a dignissim eu,

  auctor mattis purus.<br><br> Nullam leo tortor, consequat in neque at, ullamcorper dictum risus. Etiam id lorem dignissim, vestibulum erat non, hendrerit mi. Suspendisse leo justo, pharetra in ullamcorper pellentesque, euismod nec risus. Praesent luctus

  pulvinar nisl, nec placerat augue. Praesent vulputate non lacus id finibus. Duis vel nunc vehicula, finibus leo nec, congue felis. Quisque semper eget sapien id gravida. Aenean quis neque eu lacus volutpat aliquet. Nulla bibendum nulla molestie, tincidunt

  dui molestie, tristique massa. Integer tellus dolor, tempus quis felis vel, mollis rhoncus velit. Phasellus convallis semper arcu vel viverra. Aenean venenatis pulvinar metus, mollis sagittis est vestibulum non. Nulla vel ligula ac nunc dictum ultrices

  ut ut odio. Cras egestas tellus dolor. Phasellus vehicula justo nibh, quis feugiat nisl condimentum ac. Sed ac dui sit amet felis iaculis semper.

  <br><br> Sed sollicitudin leo vel consequat tincidunt. Cras sodales urna id leo semper maximus eget et est. Nam quis vestibulum justo, quis eleifend augue. Praesent vulputate rutrum metus quis ultrices. Nam tincidunt sed arcu nec faucibus. Aenean tristique

  rutrum nisl eget dapibus. Duis nec lectus pellentesque, accumsan nulla non, consequat nibh. Nunc at pellentesque orci. Praesent et efficitur enim, id euismod est. Ut at ante suscipit, finibus lorem tristique, malesuada nisi. Nam faucibus, est in fermentum

  ultrices, odio odio luctus mauris, vitae pulvinar mauris arcu id tortor. Maecenas euismod velit non faucibus molestie.

  <br><br> Phasellus gravida sem id massa tincidunt vestibulum. Etiam risus ipsum, finibus ultrices faucibus id, faucibus dapibus odio. Ut tincidunt lacus vitae pretium faucibus. Quisque facilisis hendrerit cursus. Aenean dignissim elit ante, eu mollis

  risus consequat non. Integer commodo elementum felis, vitae rutrum nulla laoreet quis. Etiam quis interdum leo. Fusce luctus ligula vitae diam tristique, sit amet semper ipsum finibus. Pellentesque consectetur mi elit, et euismod nunc viverra at. Integer

  venenatis dui vitae leo porta vehicula. Morbi congue fermentum sem id lobortis. Aliquam euismod ornare nibh, eget gravida nunc rhoncus non. Ut pharetra tristique justo, eget ullamcorper lacus.

  <br><br> Nam a augue dolor. Mauris ullamcorper nisl ac finibus tempor. Pellentesque vehicula dui enim, eu faucibus mauris elementum sit amet. Vivamus tincidunt pharetra risus quis consectetur. Morbi non dictum massa. Sed elementum nunc ornare nunc malesuada,

  sit amet pharetra nisl posuere. Fusce pulvinar orci eu lectus laoreet, in pharetra sapien elementum. Ut porta erat maximus tortor bibendum, eget aliquet nibh fermentum. Phasellus in ante suscipit, vulputate dui et, fringilla ipsum. In efficitur arcu

  et lacus fringilla accumsan. Morbi nec ipsum ut elit iaculis placerat vel quis leo. Fusce dignissim, quam id aliquet viverra, lacus metus mollis ligula, id laoreet erat ante nec felis. In nec ultricies eros. Praesent sit amet massa quis risus interdum

  lacinia in at lacus.

  <br><br> Cras sagittis libero a tristique pellentesque. Etiam luctus efficitur velit, venenatis congue nunc dignissim faucibus. Aenean massa magna, condimentum eget justo id, faucibus congue ligula. Praesent feugiat augue eget luctus dignissim. Nulla

  tellus augue, vehicula vitae sollicitudin at, viverra quis ligula. Curabitur vel fermentum lacus. Aenean porta orci ornare lacus maximus, nec viverra arcu accumsan. Curabitur eget est nec neque porta rhoncus. Curabitur tempor finibus facilisis. Aenean

  eget hendrerit tortor, quis pharetra dolor. Curabitur eget efficitur mi. Nulla vel dapibus dolor. Etiam iaculis, mi et molestie ornare, nisi nisi scelerisque purus, eu sodales quam diam vel enim. Donec ex velit, accumsan a efficitur eu, lacinia ut purus.

  Quisque eget condimentum elit.

  <br><br> Maecenas consequat ante in quam aliquam lobortis. Duis pellentesque ornare quam, sit amet maximus sapien imperdiet sed. Praesent eu lacinia dolor. Proin cursus dapibus dui. Nunc rhoncus augue ipsum. In mollis urna eget nibh luctus convallis.

  Nam lectus mi, bibendum vehicula cursus id, ornare eget arcu. Fusce fringilla justo vestibulum orci eleifend, aliquam egestas nunc sodales. Praesent a neque non ex blandit sodales. Integer sit amet convallis sem, sed cursus diam. Aenean nec pulvinar

  sem.

  <br><br> Cras facilisis, sapien vitae dictum fringilla, felis nisl rhoncus ligula, sed iaculis enim ante ornare est. Suspendisse non sapien leo. Curabitur fringilla semper nisl et blandit. Nam consequat faucibus imperdiet. Pellentesque eu risus ornare,

  luctus sapien vitae, placerat ipsum. Donec iaculis purus ac elit pellentesque, eu eleifend elit iaculis. Integer interdum, lorem at hendrerit bibendum, leo magna luctus risus, quis egestas velit lacus at nibh. Nullam mollis placerat metus, nec pretium

  tortor bibendum ac.<br><br> Nulla quam lacus, rutrum sed imperdiet sit amet, congue in elit. Proin in arcu auctor, gravida libero sed, efficitur ligula. Cras vitae sollicitudin lacus. Nam fermentum ultrices diam, sit amet fermentum nibh vehicula non.

  Phasellus quis maximus lacus, non rutrum massa. Ut vitae dolor sit amet quam egestas sodales in a tellus. Sed consequat justo sed ipsum vehicula, a elementum velit iaculis. Etiam luctus libero sit amet pellentesque finibus. Nunc metus velit, accumsan

  ac congue at, luctus sit amet magna. Sed consectetur lacinia urna, eget elementum massa ultricies id. Duis ut congue ante. Proin sodales feugiat dignissim. Cras urna orci, luctus a dignissim eu, auctor mattis purus.<br><br> Nullam leo tortor, consequat

  in neque at, ullamcorper dictum risus. Etiam id lorem dignissim, vestibulum erat non, hendrerit mi. Suspendisse leo justo, pharetra in ullamcorper pellentesque, euismod nec risus. Praesent luctus pulvinar nisl, nec placerat augue. Praesent vulputate

  non lacus id finibus. Duis vel nunc vehicula, finibus leo nec, congue felis. Quisque semper eget sapien id gravida. Aenean quis neque eu lacus volutpat aliquet. Nulla bibendum nulla molestie, tincidunt dui molestie, tristique massa. Integer tellus dolor,

  tempus quis felis vel, mollis rhoncus velit. Phasellus convallis semper arcu vel viverra. Aenean venenatis pulvinar metus, mollis sagittis est vestibulum non. Nulla vel ligula ac nunc dictum ultrices ut ut odio. Cras egestas tellus dolor. Phasellus

  vehicula justo nibh, quis feugiat nisl condimentum ac. Sed ac dui sit amet felis iaculis semper.

  <br><br> Sed sollicitudin leo vel consequat tincidunt. Cras sodales urna id leo semper maximus eget et est. Nam quis vestibulum justo, quis eleifend augue. Praesent vulputate rutrum metus quis ultrices. Nam tincidunt sed arcu nec faucibus. Aenean tristique

  rutrum nisl eget dapibus. Duis nec lectus pellentesque, accumsan nulla non, consequat nibh. Nunc at pellentesque orci. Praesent et efficitur enim, id euismod est. Ut at ante suscipit, finibus lorem tristique, malesuada nisi. Nam faucibus, est in fermentum

  ultrices, odio odio luctus mauris, vitae pulvinar mauris arcu id tortor. Maecenas euismod velit non faucibus molestie.

  <br><br> Phasellus gravida sem id massa tincidunt vestibulum. Etiam risus ipsum, finibus ultrices faucibus id, faucibus dapibus odio. Ut tincidunt lacus vitae pretium faucibus. Quisque facilisis hendrerit cursus. Aenean dignissim elit ante, eu mollis

  risus consequat non. Integer commodo elementum felis, vitae rutrum nulla laoreet quis. Etiam quis interdum leo. Fusce luctus ligula vitae diam tristique, sit amet semper ipsum finibus. Pellentesque consectetur mi elit, et euismod nunc viverra at. Integer

  venenatis dui vitae leo porta vehicula. Morbi congue fermentum sem id lobortis. Aliquam euismod ornare nibh, eget gravida nunc rhoncus non. Ut pharetra tristique justo, eget ullamcorper lacus.

  <br><br> Nam a augue dolor. Mauris ullamcorper nisl ac finibus tempor. Pellentesque vehicula dui enim, eu faucibus mauris elementum sit amet. Vivamus tincidunt pharetra risus quis consectetur. Morbi non dictum massa. Sed elementum nunc ornare nunc malesuada,

  sit amet pharetra nisl posuere. Fusce pulvinar orci eu lectus laoreet, in pharetra sapien elementum. Ut porta erat maximus tortor bibendum, eget aliquet nibh fermentum. Phasellus in ante suscipit, vulputate dui et, fringilla ipsum. In efficitur arcu

  et lacus fringilla accumsan. Morbi nec ipsum ut elit iaculis placerat vel quis leo. Fusce dignissim, quam id aliquet viverra, lacus metus mollis ligula, id laoreet erat ante nec felis. In nec ultricies eros. Praesent sit amet massa quis risus interdum

  lacinia in at lacus.

  <br><br> Cras sagittis libero a tristique pellentesque. Etiam luctus efficitur velit, venenatis congue nunc dignissim faucibus. Aenean massa magna, condimentum eget justo id, faucibus congue ligula. Praesent feugiat augue eget luctus dignissim. Nulla

  tellus augue, vehicula vitae sollicitudin at, viverra quis ligula. Curabitur vel fermentum lacus. Aenean porta orci ornare lacus maximus, nec viverra arcu accumsan. Curabitur eget est nec neque porta rhoncus. Curabitur tempor finibus facilisis. Aenean

  eget hendrerit tortor, quis pharetra dolor. Curabitur eget efficitur mi. Nulla vel dapibus dolor. Etiam iaculis, mi et molestie ornare, nisi nisi scelerisque purus, eu sodales quam diam vel enim. Donec ex velit, accumsan a efficitur eu, lacinia ut purus.

  Quisque eget condimentum elit.

  <br><br><br>

  <div class=tab>THIS SHOULD FIX TO VIEWPORT, NOT TO PAGE BASE</div>

</body>

</html>

Firefox: How to Grayscale an Entire Page without breaking fixed-positioned elements?

What if you apply the filter to body > *? Less performant, but may solve this issue. I admit to not fully considering new issues it may raise, but I can't think of a scenario in which it would alter the containing block of second depth elements.

Remove blur effect from child element with relative position

You should add the background as div next to actions div not as parent div.

Try this

 .overlay { 

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     bottom: 0;

   }

  .mdl-card__actions { 

    z-index: 2;

  }

<body>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="remo-card-image mdl-card mdl-shadow--2dp">   

  <div class="overlay" style="background:url(https://www.allaboutbirds.org/guide/assets/og/75335251-1200px.jpg) center / cover;filter: blur(5px);z-index: 0;"></div>

  <div class="mdl-card__title mdl-card--expand"></div>    

    <div class="mdl-card__actions">

      <span class="remo-card-image__filename">

        <button> 278728</button>

      </span>   

    </div>  

</div>

How to blur(css) div without blur child element

How to disable blur on child element?

.enableBlur>* {

  filter: blur(1.2px);

}

.disableBlur {

  filter: blur(0);

}

<div class="enableBlur">

  <hr>

  qqqqq<br>

  <span>qqqqq</span><br>

  <hr  class="disableBlur">

  <div>aaaaa</div>

  <div>bbbbb</div>

  <div class="disableBlur">DDDDD</div>

  <hr>

  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">

  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">

</div>

CSS Filter Cancels Element Position