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
    Commented 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 станет приниматься во внимание.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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