父母同胞上的元素 [英] element on top of parent's sibling

问题描述

我试图使一个元素出现在其父级的同级元素上，但仅出现在其下层.我尝试过更改z-index并使用浮点数，但是找不到有效的解决方案.我想将Stuff跨度保持在其父跨度内，因为它与之相关，并且如果禁用CSS则可以很好地工作.

到目前为止，他就是我

现在，让我们添加位置.您的CSS现在是

  .grid>跨度 {背景颜色:#ffff00;显示:inline-block;宽度:100px；高度:100px；垂直对齐:顶部；z索引:5；位置:相对；}.grid>跨度>跨度 {背景颜色:#ff00ff;显示:inline-block;宽度:250像素；z索引:10；位置:绝对；} 

这是结果 http://jsfiddle.net/P3qwx/4/

这是怎么回事?为什么紫色块仍然隐藏在第三和第四黄色块下面?

这是因为对于每个黄色块，都有一个创建堆栈上下文

长话短说，您的紫色方块及其z索引仅在第二个黄色方块下起作用，由于堆叠上下文不同，它在第三和第四方块下没有任何作用.这是层次结构

• 黄色块1(z索引5)
• 黄色块2(z索引5)
  • 紫色块(z索引10)
• 黄色方块3(z索引5)
• 黄色方块4(z索引5)

到此为止，修复很简单，删除 z-index 并将位置设置为绝对位置，然后让默认的堆叠规则处理业务

演示

  .grid>跨度 {背景颜色:#ffff00;显示:inline-block;宽度:100px；高度:100px；垂直对齐:顶部；}.grid>跨度>跨度 {背景颜色:#ff00ff;显示:inline-block;宽度:250像素；位置:绝对；} 

或者(我想您不希望这样做，只是为了完整起见.)

演示

HTML

 < div class ="grid">< span class ="span1">< h4> 1</h4></span>< span class ="span2">< h4> 2</h4>< span class ="span5">资料</span></span>< span class ="span3">< h4> 3</h4></span>< span class ="span4">< h4> 4</h4></span></div> 

CSS

  .span1 {背景颜色:#ffff00;显示:inline-block;宽度:100px；高度:100px；垂直对齐:顶部；位置:相对；z索引:1；}.span2 {背景颜色:#ffff00;显示:inline-block;宽度:100px；高度:100px；垂直对齐:顶部；位置:相对；z索引:5；}.span3 {背景颜色:#ffff00;显示:inline-block;宽度:100px；高度:100px；垂直对齐:顶部；位置:相对；z索引:3；}.span4 {背景颜色:#ffff00;显示:inline-block;宽度:100px；高度:100px；垂直对齐:顶部；位置:相对；z索引:4；}.span5 {背景颜色:#ff00ff;显示:inline-block;宽度:250像素；位置:绝对；z-index:1;} 

I am trying to get an element to appear on top of its parent's sibling but it only appears underneath. I have tried changing the z-index and playing around with floats but can't find a working solution. I want to keep the Stuff span inside its parent span as it is related to it and works well if CSS is disabled.

He is what I have so far 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;
}

This is what I get (FF30)

This is what I want

解决方案

Pradeep Pansari's answer is all good but I would like to explain a little bit more thus provide another solution to your question.

First of all, your z-index code doesn't work at all. z-index only has an effect if an element is positioned.

Now, let's add the position. Your css is now

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

This is the result http://jsfiddle.net/P3qwx/4/

What's happening here? Why is the purple block is still hidden under the third and fourth yellow blocks?

This is because for each yellow block, there is a stacking context created

So long story short, your purple block and its z-index only takes effect under the second yellow block, it has no power whatsoever under the third and fourth one because of different stacking context. Here's the hierarchy

• Yellow block 1 (z-index 5)
• Yellow block 2 (z-index 5)
  • Purple block (z-index 10)
• Yellow block 3 (z-index 5)
• Yellow block 4 (z-index 5)

Once we got to this point, fixing is simple, either removing the z-index and setting the position to absolute and let the default stacking rule takes care of business

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;

}

Or (I suppose you don't want this but just for for completeness sake..)

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

这篇关于父母同胞上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！