CSS过滤器导致定位问题

时间:2018-08-11 10:36:04

标签: html css css3 filter position

我有一个div,应将其固定在视口的底部。使用通常的position: fixed; bottom: 0px方法完成。

我发现了一个问题,但是如果在CSS主体中添加过滤器,则会弄乱div的位置。

body {
  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>

我做了jsfiddle来证明这一点;

使用过滤器行,div在页面底部是wayyyyy。没有滤镜线,它会固定在视口的底部。

任何人都知道如何添加亮度滤镜而不会引起定位问题吗?

1 个答案:

答案 0 :(得分:1)

这将解决您的问题。

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>

关于此变通办法的解释:在您使用filter元素的情况下,具有<body>position: fixed元素的position: absolute个子元素将处理{ {1}}元素作为相对父元素,而子元素则相对于它。

  

唯一的解决方案是在我所知的范围内使用filterfilter