Проблемы с перекрытием двух сеток IE и Edge - PullRequest
Новая
       70

Проблемы с перекрытием двух сеток IE и Edge

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

.main{
  width:100%;
  height:100vh;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlapse{
   position :fixed;
   display: grid;
   height: 100vh;
   width: 100vw;
}
<div class="main">
    <button>Click</button>
</div>

<div class="overlapse"></div>

Предположим, у меня есть два div, которые перекрываются.

Div имеет фиксированную позицию с элементами, которые не перекрывают другие элементы.Другой div содержит ссылки.Я хотел использовать наложенную и фиксированную сетку для анимации элементов в соответствии с разделом «background».

В Chrome, Firefox и opé проблем нет, мои ссылки доступны.Но в IE и Edge фиксированная сетка не позволяет мне получить доступ к ссылкам.

Анимированные элементы в фиксированной сетке одинаковы для каждого раздела, но их место меняется, как и анимация.

Я не хотел реинтегрировать эти элементы HTML в каждом разделе, но, возможно, есть другое решение.

Я использую GSAP для анимации.

Я думал, что буду использовать сетки для размещения своих элементов изатем измените их местоположение с помощью GSAP, анимировав их.

Я не хотел помещать каждый элемент в относительное или фиксированное положение.

Может быть, я не правильно думаю.

Ответы [ 2 ]

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

Пожалуйста, проверьте ваш пример кода, используя ваш код, перекрывающийся div (class = '. Overlapse') покрывается основным div, поэтому он не отображается.Есть ли другой код?Можете ли вы опубликовать достаточный код для воспроизведения проблемы, как в Минимальный, Полный и Проверяемый пример .

Кроме того, по моему мнению, если ссылка в главном div не доступна, это означает, что div перекрывается в покрываемых ими, вы можете установить цвет фона, чтобы проверить это.Я полагаю, что вы можете изменить положение или размер div-ов перекрытия, чтобы ссылки не закрывались.Как этот образец: 

    .main {
        width: 100%;
        height: 100vh;
        background-color: forestgreen;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 0;
    }

    .overlapse {
        position: absolute;
        z-index: 1;
        background-color: aquamarine;
        display: grid;
        height: 200px;
        width: 200px;
        top: 20px;
        left: 40px;
    }

Подробнее, см. этот образец .

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

Как я понимаю, вы можете добавить их в основной div 

position: relative;
z-index: 2;

и установить z-index: 1; на перекрытии, чтобы ваше перекрытие всегда было под основным div.

Вторым вариантом может быть pointer-events: none; на вашем div с перекрытием, чтобы никакие события не запускались на вашем фоне div

надеюсь, это поможет

...