html - 元素在 parent 的 sibling 之上

Question

我试图让一个元素出现在其父元素的兄弟元素之上，但它只出现在下面。我曾尝试更改 z-index 并尝试使用 float ，但找不到可行的解决方案。我想将 Stuff 跨度保留在其父跨度内，因为它与其相关并且在禁用 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)

这就是我想要的

Answer 1

你可以试试这个:

Demo

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

 }