Как установить фиксированный элемент, помещенный в липкий, выше относительного - PullRequest
Новая
       56

Как установить фиксированный элемент, помещенный в липкий, выше относительного

0 голосов
/ 17 июня 2019

Я помещаю фиксированный элемент в другой липкий элемент и хочу, чтобы он покрывал любые другие элементы на странице.Это выглядит очевидным, но ... Лучше взглянуть на codepen.Я думаю, что это не нормальное поведение.

Протестировано в Chrome - просто очень странно.Протестировано в Firefox - сбой при рисовании (попробуйте нажать на черную область без игрового поля)

Это четкое воспроизведение ошибки, и мне действительно нужен фиксированный элемент в липком элементе, который закрывает размещенный рядом с ним относительный элемент.

Кто-нибудь может помочь?

Посмотрите на код - я пытаюсь поиграть с z-index и результат выше липкий и после он сильно отличается."Z-индекс: -1;"выглядит как взломать близко к успеху, но у меня есть много других элементов на странице, которая имеет положительный z-индекс.

Посмотрите здесь мою ручку, где я ее проверил 

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

1 Ответ

0 голосов
/ 17 июня 2019

Вам нужно увеличить z-index липкого элемента 

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

Со страницы MDN :

Это значение всегда создает новый контекст стека.

Таким образом, использование z-index для фиксированного элемента бесполезно, поскольку оно относится к контексту стекирования, созданному липким элементом, и поскольку элементы bug также позиционируются с z-index, равным 0 порядок дерева будет определять порядок заказа:

Все позиционированные, непрозрачные или преобразованные потомки, в порядке дерева, которые делятся на следующие категории:
  1. Все позиционированные потомки с 'z-index: auto' или 'z-index: 0', в порядке дерева, ref

Вы также можете уменьшить z-index элемента ошибки, но я не рекомендую какВы можете столкнуться с нежелательным поведением, когда элементы могут быть спрятаны за: 

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:-1;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

Вы также можете просто удалить positon:relative для ошибка элементов: 

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  z-index:1000; /* have no effect on non-postionned element*/
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}
<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

Похожие: Почему элемент со значением z-index не может покрыть своего потомка?

Если вы не можете изменить z-index элемента sticky и не можете удалить position:relative из bug элементов, и вы не можете уменьшить их z-index ниже 0, и вы не можете изменить структуру HTML, тогда выЯ не могу этого сделать.

...