z-индекс для вложенного div - PullRequest
Новая
       14

z-индекс для вложенного div

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

Я ожидаю получить этот результат:
https://ibb.co/htJD6J
В моих стилях я установил относительную родительскую позицию; z-index 50. Для ребенка я установил абсолютную позицию; z-индекс 25. Но в результате я получил это.
https://ibb.co/cwhjDy
Постскриптум Извините, недостаточно репутации для публикации изображений. Итак, я не могу понять, почему z-index не работает правильно. Кто-нибудь может мне помочь с этим?

Добавить код: Родитель 

.sel_project_block {
 background-color: #f5876e;
 border-radius: 14px;
 margin-right: 150px;
 width: 239px;
 height: 34px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 position: relative;
 box-shadow: 1px 3px 7px #000;
 z-index: 5;
}

ребенок 

.additional {
 max-width: 185px;
 position: absolute;
 top: 76.2%;
 right: 22.05%;
 z-index: 1;
 color: #67573e;
 background-color: #fff;
 border: 1px solid #978d7e;
 font-size: 16px;
 width: 185px;
}

Ответы [ 4 ]

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

Хорошо, коллеги. Через несколько часов я решаю свои проблемы. Что я сделал: сначала я добавил новую обертку и поместил в нее все блоки, включая parent и child. во-вторых, я добавил в блок-обертку z-index = 3; и установите в раскрывающемся блоке z-index = -1. В мопсе похоже: 

.dropdownWrapper
 .sel_project_block
 .sel_project_block__proj
   span New Project
.sel_project_block__imgWrapper(@click="showDropdown")
  img(src="../assets/images/white-arrow.png")
.clientsTop__dropdown
.additional(v-if="dropdownVisible")
.first {{ newProject.trans }}

...

и код scss: 

.dropdownWrapper {
height: 34px;
width: 239px;
margin-right: 50px;
z-index: 3;
position: relative;

.sel_project_block {
  ...
}

.clientsTop__dropdown {
  z-index: -1;
  position: absolute;
  top: 59.2%;
  right: 13.8%;
...

  .additional {
    ...
  }
}

}

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

Поскольку div#child является дочерним элементом div#parent, а поскольку div#parent устанавливает контекст стека (поскольку он имеет целочисленное значение z-index), вы не можете поместить div#parent поверх div#child путем увеличения его z-индекса

Z-индекс, установленный для div#child, находится в контексте div#parent.Поэтому, если вы хотите, чтобы div#child отображалось ниже div#parent, вам нужно установить отрицательный z-индекс для div#child.

в будущем - если вы отправите код, сопровождающий ваш вопрос, ответы будут прощечтобы понять.(также правильное задание вопроса также даст лучшие результаты)

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

Поскольку .child относительно его .parent, то же самое относится и к его z-index.

Вы можете покончить с этим, удалив z-index родительского элемента: 

.sel_project_block {
  background-color: #f5876e;
  border-radius: 14px;
  margin-right: 150px;
  width: 239px;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  box-shadow: 1px 3px 7px #000;
}

.additional {
  height: 50px;
  max-width: 185px;
  position: absolute;
  top: 76.2%;
  right: 22.05%;
  z-index: -1;
  color: #67573e;
  background-color: #fff;
  border: 1px solid #978d7e;
  font-size: 16px;
  width: 185px;
}
<div class="sel_project_block">
  <div class="additional"></div>
</div>
0 голосов
/ 16 мая 2018

Настройка position: anything-that-is-not-static устанавливает новый контекст стека.

Позиция дочернего элемента относительно родительского (то есть position: relative).

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

...