Блог

Я пытаюсь заставить элемент отображаться поверх родственного родительского элемента, но он отображается только внизу. Я попытался изменить z-индекс и поиграть с плавающими значениями, но не могу найти рабочее решение. Я хочу сохранить диапазон содержимого внутри родительского диапазона, поскольку он связан с ним и хорошо работает, если CSS отключен.

Он — это то, что у меня есть до сих порhttp://jsfiddle.net/P3qwx /

HTML

 <div class="grid">
    <span>
        <h4>1</h4>
    </span>
    <span>
        <h4>2</h4>
        <span>Stuff</span>
    </span>
    <span>
        <h4>3</h4>
    </span>
    <span>
        <h4>4</h4>
    </span>
</div>
  

CSS

 .grid > span {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    z-index: 5;
}

.grid > span > span {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    z-index: 10;
}
  

Это то, что я получаю (FF30)

Это то, что я хочу

Вы можете попробовать это:

ДЕМОНСТРАЦИЯ

 .grid > span > span {
  background-color: #ff00ff;
  display: inline-block;
  width: 250px;
  z-index: 10;
  position:absolute;

 }
  

Ответ Прадипа Пансари хорош, но я хотел бы объяснить немного больше, чтобы предоставить другое решение вашего вопроса.

Прежде всего, ваш z-index код вообще не работает. z-index имеет эффект только в том случае, если элемент расположен.

Теперь давайте добавим position . Ваш CSS теперь

 .grid > span {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    z-index: 5;
    position:relative;
}

.grid > span > span {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    z-index: 10;
    position:absolute;
}
  

Это результат http://jsfiddle.net/P3qwx/4 /

Что здесь происходит? Почему фиолетовый блок все еще скрыт под третьим и четвертым желтыми блоками?

Это потому, что для каждого желтого блока создается контекст стекирования

Короче говоря, ваш фиолетовый блок и его z-индекс вступают в силу только во втором желтом блоке, он не имеет никакой силы в третьем и четвертом из-за разного контекста стекирования. Вот иерархия

• Желтый блок 1 (z-индекс 5)
• Желтый блок 2 (z-индекс 5)
  • Фиолетовый блок (z-индекс 10)
• Желтый блок 3 (z-индекс 5)
• Желтый блок 4 (z-индекс 5)

Как только мы добрались до этого момента, исправить это просто, либо удалив z-index и установив позицию в абсолютное значение, и пусть правило укладки по умолчанию позаботится о бизнесе

ДЕМОНСТРАЦИЯ

 .grid > span {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
}

.grid > span > span {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    position:absolute;

}
  

Или (я полагаю, вы не хотите этого, но просто для полноты картины ..)

ДЕМОНСТРАЦИЯ

HTML

 <div class="grid">
    <span class="span1">
        <h4>1</h4>
    </span>
    <span class="span2">
        <h4>2</h4>
        <span class="span5">Stuff</span>
    </span>
    <span class="span3">
        <h4>3</h4>

    </span>
    <span class="span4">
        <h4>4</h4>

    </span>
</div>
  

CSS

 .span1 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 1;
}
.span2 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 5;
}
.span3 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 3;
}
.span4 {
    background-color: #ffff00;
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: top;
    position:relative;
    z-index: 4;
}

.span5  {
    background-color: #ff00ff;
    display: inline-block;
    width: 250px;
    position:absolute;
    z-index:1;    
}