0

Хочу создать топ меню. header позиционирован как fixed, но обратите вниманию на inner_content у него z-index -1 всё равно стоит над header-ром

/* setting */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  height: 100vh;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.outline {
  outline: 1px solid #f00;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}


/* header */

header {
  background: rgba(14, 13, 33, .8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}


/* navigation */

nav {
  display: flex;
  align-items: center;
  color: #fff;
}


/* Logotype h2 */

.nav-logo {
  flex: 1;
}


/* content menu */

.top_menu_content {
  width: 700px;
  display: flex;
  justify-content: space-around;
}

.top_menu_content>li {
  position: relative;
  z-index: 10;
}


/*content links */

.content_link {
  display: inline-block;
  padding: 20px;
  color: #fff;
  transition: .2s;
}

.content_link:hover {
  color: #fca505
}

.content_link:hover .arrow {
  border-color: #fac505 transparent transparent transparent;
}


/* arrow for link */

.arrow {
  display: inline-block;
  margin-left: 10px;
  border: 5px solid;
  border-color: #fff transparent transparent transparent;
}


/* inner content */

.inner_content {
  position: absolute;
  top: 50%;
  left: 0;
  background: rgba(0, 0, 0, .5);
  border-top: 2px solid #fca505;
  transition: .5s;
  z-index: -1;
}


/* inner links */

.inner_link {
  display: inline-block;
  min-width: 200px;
  padding: 10px;
  color: #fff;
  transition: .2s;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
}

.inner_link:hover {
  padding-left: 20px;
  color: #fca505;
  background: rgba(0, 0, 0, .1);
}
<header>
  <div class="container">
    <nav>
      <h2 class="nav-logo">Logotype</h2>
      <ul class="top_menu_content ">
        <li><a class="content_link" href="#">item 1</a></li>
        <li>
          <a class="content_link" href="#">item 2 <span class="arrow"></span></a>
          <ul class="inner_content">
            <li><a class="inner_link" href="#">inner items 1</a></li>
            <li><a class="inner_link" href="#">inner items 2</a></li>
            <li><a class="inner_link" href="#">inner items 3</a></li>
            <li><a class="inner_link" href="#">inner items 4</a></li>
            <li><a class="inner_link" href="#">inner items 5</a></li>
          </ul>
        </li>
        <li><a class="content_link" href="#">item 3</a></li>
        <li><a class="content_link" href="#">item 4</a></li>
        <li><a class="content_link" href="#">item 5</a></li>
      </ul>
    </nav>
  </div>
</header>

1
  • никогда не делайте отрицательный z-index, это плохая практика, лучше делайте положительный
    – meine
    19 окт 2019 в 11:35

1 ответ 1

1

В документации написано:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

Перевод: Когда z-index не указано ни для одного элемента, элементы располагаются в следующем порядке (снизу вверх):

  1. Фон и границы корневого элемента
  2. Потомки не позиционированные блоки, в порядке появления в HTML
  3. Потомки позиционированные элементы, в порядке появления в HTML

Если посмотреть в chrome то видно что item 2 не унаследовал z-index и он у него auto. У item 2 position = static (по умолчанию) - это не позиционированный элемент.

Соответственно сначала рисуется item 2, потом сверху рисуется подменю (поскольку это позиционированный элемент с position=absolute).

Если item 2 Вы зададите position=relative - то он станет рисоваться на 3 шаге и z-index станет приниматься во внимание.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.