CSS толькоCSS абсолютный ребенок за его родителем
Я хотел бы, чтобы мой абсолютный расположен div за это (относительно) родителя, но все еще оставаться на вершине его родителей братьев и сестер. Таким образом, используя отрицательное значение z-index не поможет ...
Это fiddle на самом деле противоположное тому, что я ищу: Родитель сНу (слева) должна быть на вершине зеленого ребенка DIV и сибинг-div (справа) должен стоять за ним.
Любая идея здесь?
посмотреть здесь>jsfiddle
я также предлагаю вам добавить другой класс к .container который имеет .inner в нем
как: <div class="container parent">, а затем в CSS .parent ~ *{z-index:-2} так что вы уверены, что все это братья и сестры есть z-index:-2
или фрагмент кода ниже:
.container {
display: inline-block;
margin: 10px;
width: 50px;
height: 50px;
background-color: red;
position: relative;
}
.inner {
top: 5px;
left: -10px;
right: -50px;
bottom: -10px;
background-color: green;
position: absolute;
z-index:-1;
}
.container:not(:first-child) {
z-index:-2;
}<div class="container">
<div class="inner">
</div>
</div>
<div class="container">
</div>Он работает, но у меня есть две проблемы: 1. Селектор для других элементов очень специфичен для этого примера (не работает в моем коде). 2. При установке z-index на отрицательный, я теряю способность зависания (мне нужно) – naomi
ну ... мне нужно больше кода от вас, если вы хотите, чтобы я сделал 100% -ный рабочий ответ –
Вы можете использовать nth-child selector целевой two different parent div такого же класса .container, как показано ниже,
.container:nth-child(1){
display: inline-block;
margin: 10px;
width: 50px;
height: 50px;
background-color: red;
position: relative;
}
.inner {
top: 5px;
left: -10px;
right: -50px;
bottom: -10px;
background-color: green;
position: absolute;
z-index:-1;
}
.container:nth-child(2){
display: inline-block;
margin: 10px;
width: 50px;
height: 50px;
background-color: red;
z-index:-2;
position:absolute;
}<div class="container">
<div class="inner">
</div>
</div>
<div class="container">
</div>, зачем использовать те же стили 2 раза? просто используйте стили, в которых все divs с классом 'container' имеют общее число только один раз, а затем конкретные стили для разных' контейнеров' div. например, если у обоих есть 'background-color: red', просто напишите один раз' .container {background-color: red'} не 2 раза. –
@MihaiT. Да, вы правы, моя основная мысль заключалась в том, что вы можете использовать селектор nth-child и можете создавать два div с тем же именем класса, но с разными свойствами css. Таким образом, становится легче, видя свойства обоих div, что они выполняют. И при использовании пользователя селектора nth-child пользователь должен определить свойства css для каждого выбранного элемента. – frnt
да. вы можете использовать 'nth-child'. но в то же время вы можете стилизовать '.контейнер {background: red; position: absolute; width: 50px} 'и т. д. и, например, напишите' .container: nth-child (2) {background: blue;} '; '.container: nth-child (5) {background: yellow;}' и т. д. и просто измените стиль, специфичный для этого 'nth-child' –
Вам просто нужно дать г-индексный свойство к нему. Свойство z-index указывает порядок стека элемента. Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.
Примечание: z-индекс работает только с расположенными элементами (положение: абсолютное, положение: относительное или положение: фиксированное).
.inner {
top: 5px;
left: -10px;
right: -50px;
bottom: -10px;
background-color: green;
position: absolute;
z-index:1;
}
Вы можете увидеть демо-here
первый красный ящик (слева, родительский внутренний) должен быть сверху зеленой коробки (внутренней) –
проверить мой ответ ниже. дайте мне знать, если он работает –