укладка с z-индексом, дочерний элемент сверху по родительскому брату

Question

Я столкнулся с этой проблемой: fiddle. Короче говоря, я хочу, чтобы зеленый блок находился в середине z-порядка, без необходимости менять HTML. Таким образом, желтый на дне, зеленый посередине и красный сверху.

HTML:

<div class="parent"> 
    Chillin in the background 
    <div class="child"> 
     I really want to be on top. 
    </div> 
</div> 
<div class="other-guy"> I want to be in the middle! </div> 

CSS:

.parent { 
    background-color: yellow; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 200px; 
    width: 200px; 
    z-index: 1; 
} 
.child { 
    background-color: red; 
    position: relative; 
    top: 10px; 
    left: 20px; 
    height: 50px; 
    width: 150px; 
    z-index: 100; 
} 
.other-guy { 
    background-color: green; 
    position: absolute; 
    top: 40px; 
    left: 100px; 
    height: 200px; 
    width: 200px; 
    z-index: 50; 
} 

Чем дольше история, в моем решении я использую бутстрэпами подвесную систему, чтобы поместить дочерний элемент так в целом вещь отзывчивая. Средний слой - это элемент Google Maps, который нужно манипулировать пользователем. Мое предыдущее решение имело абсолютно позиционированный дочерний элемент на карте, который работает, но я не знаю, как сделать это отзывчивым.

Мое новое решение отлично работает с отзывчивым углом, но потом я узнал, что родитель блокирует взаимодействие с картами.

Так что теперь я нуждаюсь в решении, у которого есть некоторые отзывчивые элементы поверх Google Maps.

Answer 1

Я удалил абсолютное положение из желтого div и удалил z-индекс из зеленого div. Возможно, это то, что вы сказали.

.parent { 
 
    background-color: yellow; 
 
    
 
    top: 0; 
 
    left: 0; 
 
    height: 200px; 
 
    width: 200px; 
 
    z-index: 1; 
 
} 
 
.child { 
 
    background-color: red; 
 
    position: relative; 
 
    top: 10px; 
 
    left: 20px; 
 
    height: 50px; 
 
    width: 150px; 
 
    z-index: 2; 
 
} 
 
.other-guy { 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 100px; 
 
    height: 200px; 
 
    width: 200px; 
 
    
 
}

<div class="parent">Chillin in the background 
 
    <div class="child">I really want to be on top.</div> 
 
</div> 
 
<div class="other-guy">I want to be in the middle!</div>

Answer 2

проверить эту статью:

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Если эта статья является правильным, и я понял, это правильно, то это не представляется возможным, так как желтый и красный являются частью один и тот же контекст стекирования.

Я отпишусь, добавив JQuery в свою скрипку и добавить эту строку коды на самом деле переместить зеленый элемент в желтому:

$(".other-guy").insertAfter(".child");