Question

我试图让一个元素出现在其父母的兄弟之上，但它只出现在下面。我试过改变z-index并玩浮动但是找不到有效的解决方案。我希望将Stuff跨度保持在其父跨度内，因为它与它相关并且如果禁用CSS则效果很好。

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）

enter image description here

这就是我想要的

enter image description here

Answer 1

你可以试试这个：

Demo

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

 }

Answer 2

Pradeep Pansari的回答很好，但我想再解释一下，从而为你的问题提供另一种解决方案。

首先，您的z-index代码根本不起作用。 z-index only has an effect if an element is positioned.

现在，我们添加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/

这里发生了什么？为什么紫色块仍隐藏在第三和第四个黄色块下？

这是因为对于每个黄色块，都有stacking context创建的

长话短说，你的紫色块及其z-index只在第二个黄色块下生效，由于不同的堆叠环境，它在第三个和第四个黄色块下无任何力量。这是层次结构

黄色块1（z-index 5）
黄色区块2（z-index 5）
- 紫色块（z-index 10）
黄色块3（z-index 5）
黄色块4（z-index 5）

一旦我们达到这一点，修复很简单，要么删除z-index并将位置设置为绝对，并让默认堆叠规则处理业务

Demo

.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;

}

或者（我想你不想要这个，但仅仅是为了完整起见..）

Demo

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;    
}

在父母的兄弟姐妹之上的元素

2 个答案: