CSS过滤器：亮度与位置：粘性答案

【问题标题】：css filter:brightness vs position:stickyCSS过滤器：亮度与位置：粘性
【发布时间】：2020-02-10 20:37:24
【问题描述】：

我的“LOGO”为position: sticky 的站点和“panel1”都在网格的同一个父级中。

一切正常，直到我想将filter: brightness(); 添加到网站上的任何内容（此处为“panel1”），粘性作品但“LOGO”位于其他元素下（运行代码以了解我的意思）。

.wrapper {
  display: grid;
  place-items: center;
  color: #A68555;
  font-family: Sarpanch;
  font-size: 2vw;
}

.wrapper>div {
  margin-bottom: 5%;
  width: 99vw;
}

#logo {
  display: grid;
  position: sticky;
  top: 0;
  place-items: center;
  background-color: #456;
  padding: 2vw 0vw 2vw 0vw;
  margin-top: 5%;
}

#logo>div {
  display: grid;
}

#panel1 {
  display: grid;
  place-items: center;
  background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.naH_ee2KTP4lM8xvD0yobwHaCx%26pid%3DApi&f=1);
  background-size: cover;
  height: 50vh;
  margin-bottom: 1000px;
  filter: brightness(100%);
}

<div class="wrapper">
  <div class="panels" id="logo">
    <div style="position:relative; width:40vw;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcarfinance.credit%2Fdist%2Fimg%2Fuser%2F3d-carousel%2Fcar.png&f=1&nofb=1" style="width:15vw;">
      <h1 style="position:absolute; right:0px; top:50%; transform: translateY(-50%);">LOGO</h1>
    </div>
  </div>

  <div class="panels" id="panel1">
  </div>

</div>

【问题讨论】：

标签： html css sticky css-filters

【解决方案1】：

过滤器创建一个新的堆叠上下文（以及其他属性，如transform）。添加一些 z-index 来解决这个问题：

.wrapper {
  display: grid;
  place-items: center;
  color: #A68555;
  font-family: Sarpanch;
  font-size: 2vw;
}

.wrapper>div {
  margin-bottom: 5%;
  width: 99vw;
}

#logo {
  display: grid;
  position: sticky;
  top: 0;
  place-items: center;
  background-color: #456;
  padding: 2vw 0vw 2vw 0vw;
  margin-top: 5%;
  z-index: 1; /* Add z-index, any positive integer (basically: not "auto") will pull this above */
}

#logo>div {
  display: grid;
}

#panel1 {
  display: grid;
  place-items: center;
  background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.naH_ee2KTP4lM8xvD0yobwHaCx%26pid%3DApi&f=1);
  background-size: cover;
  height: 50vh;
  margin-bottom: 1000px;
  filter: brightness(100%);
}

<div class="wrapper">
  <div class="panels" id="logo">
    <div style="position:relative; width:40vw;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcarfinance.credit%2Fdist%2Fimg%2Fuser%2F3d-carousel%2Fcar.png&f=1&nofb=1" style="width:15vw;">
      <h1 style="position:absolute; right:0px; top:50%; transform: translateY(-50%);">LOGO</h1>
    </div>
  </div>

  <div class="panels" id="panel1">
  </div>

</div>

【讨论】：

确实创建了堆叠上下文，但这不是这里的问题。这是这里涉及的绘画顺序。过滤器改变了元素应该被绘制的顺序，并且粘性元素和过滤元素都属于同一个堆叠上下文