z-index + переполнение: авто = ошибка? - PullRequest
Новая
       20

z-index + переполнение: авто = ошибка?

0 голосов
/ 26 сентября 2019

Я делаю всплывающие окна как position:fixed div и распространяюсь по иерархии z-index, чтобы гарантировать, что этот div превыше всего.Все хорошо, за исключением одного случая, когда Chrome Draw прокручивает мое всплывающее окно, iOS-сафари обрезает мой popop.

Я сделал очень маленькую репродукцию https://codepen.io/heavenmaster/pen/XWrQmZY Примечание, позиция absolute и настройка z-index важны для меня.

Мне остро нужен обходной путь. 

.scrollview {
  z-index: 1;
  position: absolute;
  margin: 100px;
  width: 200px;
  height: 200px;
  border: solid gray 1px;
  overflow: auto;
}

.container {
  z-index: 1;
  position: absolute;
  width: 1000px;
  height: 1000px;
}

.tooltip {
  z-index: 1;
  width: 250px;
  height: 50px;
  border: solid 1px gray;
  background: silver;
  position: fixed;
  left: 80px;
  top: 80px;
}
<div class='scrollview'>
  <div class='container'>
    <div class='tooltip'>Tooltip</div>
  </div>
</div>

1 Ответ

0 голосов
/ 26 сентября 2019

хорошо, давайте попробуем это, надеюсь, это поможет: 

.scrollview1
{
  z-index: 1;
    position: absolute;
    margin: 100px;
    width: 250px;
    height: 200px;
}
.scrollview
{
  z-index: 1;
/*   position: absolute; */
/*   margin: 100px; */
  width: 200px;
  height: 200px;
  border: solid gray 1px;
  overflow: auto;
}

.container{
  z-index: 1;
/*   position: absolute; */
  width: 1000px;
  height: 1000px;  
}

.tooltip{
  z-index: 1;
  width: 250px;
  height: 50px;
  border: solid 1px gray;
  background: silver;
  position: fixed;
  left: 80px;
  top: 80px;
}
<div class='scrollview1'><div class='scrollview'>   
  <div class='container'>    
    <div class='tooltip'>Tooltip</div>    
  </div>  
  </div></div>
...