z-index не работает должным образом на боковой панели материала - PullRequest
Новая
       20

z-index не работает должным образом на боковой панели материала

0 голосов
/ 30 мая 2018

У меня есть проект, в котором я использую angular-material и materialize-css боковую навигацию вместе.Боковая навигация Angular Material всегда находится в открытом состоянии на левой панели.А для side-nav materialize-css есть кнопка, чтобы открыть его с левой стороны.

Для угловых материалов вычисляемые свойства равны 

z-index:2;
position:absolute

, а для materialize-css вычисленные свойства

z-index:999;
position:fixed

Я читал, что

z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

Таким образом, свойство position установлено для обеих сторон навигации.Но боковая навигация angular-material имеет приоритет и показывается по сравнению с side-nav материализации-css.Я не могу понять, как это возможно и в чем причина этого?

Если я установлю z-index:1 для углового материала, то это будет за материализацией-css, но изменением z-indexmaterialize-css до 999999999 не работает.

Обновлено

Я читал это на на этом сайте , но все еще не могу понять

Каждый стековый контекст имеет один элемент HTML в качестве корневого элемента.Когда новый элемент стека формируется на элементе, этот контекст стекирования ограничивает все его дочерние элементы определенным местом в порядке наложения.Это означает, что если элемент содержится в контексте наложения в нижней части порядка наложения, то нет способа заставить его отображаться перед другим элементом в другом контексте наложения, который выше в порядке наложения, даже еслиz-index of billion!

На самом деле z-index не работает для sidenav materialize-css.Поскольку sidenav сам добавляет элемент с z-index:997

<div class="sidenav-overlay" style="display: block; opacity: 1;"></div>

и CSS 

.sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 997;
    display: none;
}

, на экране появляется наложение.Я не могу выполнять какие-либо действия с боковой навигацией, даже если z-index равен 999.Так что проблема с z-индексом sidenav.

Я не могу опубликовать весь код, так как индивидуально sidenav работает, но это иерархия dom 

body
 > app-root (Angular Componet) 
    > mat-sidenav-container (Angular Material)
       > mat-sidenav-content (Angular Material)
          > sidenav (Angular Component) 
             > div
                > div (Materialize CSS Sidenav content)

Итак, я сделал угловой компонент для materialize-css sidenav.

Update2

На самом деле узлы DOM mat-sidenav-container и mat-sidenav-content, которые являются родительскими для фактического sidenav содержимого, имеют z-index:1 оба.И div, который sidenav компонент вставляет в body (прямой дочерний элемент, parrelel для моего app-root), имеет z-index:997.Так как родительский элемент sidenav имеет меньший индекс, поэтому, я думаю, sidenav's z-index не имеет значения (здесь 999).Если я удаляю z-index из mat-sidenav-container и mat-sidenav-content элемента, он работает.

и вот код 

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {});
});

function item() {
  alert("Clicked");
}
.mat-drawer-container {
  position: relative;
  z-index: 1;
}

.mat-drawer-content {
  position: relative;
  z-index: 1;
}

.app-item {
  cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="mat-drawer-container">
  <div class="mat-drawer-content">
    <a class="sidenav-trigger" href="javascript:void(0)" data-target="2d37c81b-6624-6cba-251d-c3a7fceabc3a">Open</a>

    <div class="sidenav" id="2d37c81b-6624-6cba-251d-c3a7fceabc3a">
      <ul>
        <li class="app-item" onclick="item()">
          <i class="material-icons">dashboard</i>
          <b> App1</b>
        </li>
      </ul>
    </div>
  </div>
</div>

Но это не решение для сброса z-индекса всех родительских элементов, даже если эту информацию сложно получить.Что является лучшим решением для этого?

1 Ответ

0 голосов
/ 30 мая 2018

Не уверен, в чем ваша проблема.Но может показаться, что z-индекс относится к контексту стека.

HTML: 

<div class="a">
    <div class="b"> </div>
</div>

<div class="c"> </div>

CSS: 

.a, .b, .c {
   position: absolute;
}

.a {
   z-index: 1; 
}

.b {
    z-index: 1000; 
}

.c {
    z-index: 100; 
}

В этом случае b будет под c .

Это потому, что Контекст суммирования b , a , под c *

Я считаю полезным думать об этом в слоях.

...