css фильтр: яркость против положения: липкий - PullRequest
Новая
       55

css фильтр: яркость против положения: липкий

0 голосов
/ 10 февраля 2020

У меня есть сайт с "LO GO", равным position: sticky, и "panel1" находятся в одном и том же родительском элементе сетки.

Все работает нормально, пока я не хочу добавить filter: brightness(); к чему-либо на site (здесь «panel1»), работает липко, но «LO GO» идет под другими элементами (запустите код, чтобы понять, что я имею в виду). 

.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>

1 Ответ

0 голосов
/ 10 февраля 2020

Фильтры создают новый контекст стека (а также другие свойства, такие как 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>
...