Z-индекс не работает на элементе с абсолютным позиционированием (несмотря на непрозрачность, et c. Удалено) - PullRequest
Новая
       32

Z-индекс не работает на элементе с абсолютным позиционированием (несмотря на непрозрачность, et c. Удалено)

0 голосов
/ 08 марта 2020

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

<nav id="nav-main" role="navigation">
  <ul class="site-nav site-nav__main">
    <li class="nav__menuitem nav__menuitem--main first level1"><a class="nav__menulink nav__menulink--main transition" href="my-link">my-link</a></li>
    <li id="subNav__parent" class="nav__menuitem nav__menuitem--parent transition clearfix level1">SubNav Toggle Label<span class="subNav__toggle">+</span>
      <ul class="subNav">
        <li class="nav__menuitem nav__menuitem--subnav first level2">
          <a class="nav__menulink nav__menulink--main transition" href="my-link2">my-link2</a>
        </li>
        <li class="nav__menuitem nav__menuitem--subnav last level2">
          <a class="nav__menulink nav__menulink--main transition" href="my-link3">my-link3</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.site-nav {
  margin: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  list-style-type: none;
  transition: .2s ease-out; /*related to a different transition; not relevant to the issue being 
    posted about*/
  transform: translateY(0%);
}

// SUBNAV

.nav__menuitem--parent { /*this is the click element used to open / close the sub-menu
  position: relative;
  cursor: pointer;
}

.subNav {
  position: absolute;
  z-index: 10;
  margin: 1rem auto 0 auto;
  padding: 1rem 0;
  width: 250px;
  visibility: 0;
}

.subNav.open {
  transition-property: visibility, max-height;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  max-height: 500px; /* approximate max height */
  visibility: 0;
}

Ответы [ 2 ]

0 голосов
/ 08 марта 2020

Решение, которое я реализовал, не учитывает тот факт, что HTML и CSS, как написано, должно работать, но не работает, но, FWIW, я z-проиндексировал элемент заголовка и поместил его над элементом переноса для страницы содержание. Поскольку подменю является дочерним элементом глобальной навигационной системы, которая, в свою очередь, является дочерним элементом элемента заголовка, его порядок стека эквивалентен заголовку в соответствии со значением по умолчанию для z-индекса auto.

0 голосов
/ 08 марта 2020

при указании позиции: абсолютная; элемент будет расположен относительно своего родителя. Вам нужно указать top: 0 или аналогичный, чтобы переопределить это.

Вот быстрая скрипка для иллюстрации 

.parent-nav {
  background-color:red;
  position:absolute;
  top:0;
  width:100%;
}

.sub-nav-parent {
  background-color:blue;
  position:relative;
}

/* 10px below sub nav parent */
.sub-nav-child {
  background-color:cyan;
  position:absolute;
  top:10;
  left:0;
  z-index:99;
  width:100%;
}
<div class="page-content">
<h1>
  This is my page content
</h1>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
</div>

<div class="parent-nav">
<ul class="sub-nav-parent">
  <li>Sub Nav Parent</li>
  <li>
    <ul class="sub-nav-child">
        <li>Child 1</li>
        <li>Child 2</li>
    </ul>
  </li>
</ul>
</div>
...