Z-индекс для вложенного div
Ожидаю получить такой результат:
https://ibb.co/htJD6J
В своих стилях я установил относительную родительскую позицию; z-index 50. Для ребенка я установил абсолютное положение; z-индекс 25.
Но в результате у меня получилось вот такое
https://ibb.co/cwhjDy
P.S. К сожалению, репутации недостаточно для публикации изображений.
Итак, я не могу понять, почему 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;
}
изменить положение на абсолютное и добавить отрицательный индекс z, при необходимости маржу
karthik, если вы видите - я использую относительное / абсолютное положение и z-индексы, но не работают.
Ответы 4
Настройка position: anything-that-is-not-static устанавливает новый контекст стекирования.
Позиция дочернего элемента - по отношению к родителю (то есть position: relative).
Поэтому, если вы хотите, чтобы он отображался как родительский за, вы должны присвоить ему отрицательныйz-index.
Поскольку div#child является дочерним элементом div#parent, и поскольку div#parent устанавливает контекст стекирования (поскольку он имеет целочисленное значение z-индекса), вы не можете поместить div#parent поверх div#child, увеличив его z-индекс.
Z-index, который вы установили для div#child, находится в контексте div#parent. Поэтому, если вы хотите, чтобы div#child отображался ниже div#parent, вам необходимо установить отрицательный z-индекс для div#child.
в будущем - если вы разместите код для сопровождения вашего вопроса, ответы будут легче понять. (кроме того, правильная постановка вопроса также даст лучшие результаты)
но что?? Я не понимаю, к чему вы клоните
Поскольку .child относительно своего .parent, то же самое относится и к его z-индексу.
Вы можете покончить с этим, удалив 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>Я попробую и отвечу на следующий день. Tnx.
Хорошо, коллеги. Через несколько часов я решаю свои проблемы. Что я сделал: сначала я добавил новую оболочку и поместил в нее все блоки, включая родительский и дочерний. во-вторых, я добавил в блок-оболочку 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 {
...
}
}
}
Нам нужны не изображения, а ваш код.