如何使用z-index与相对定位？ [英] how to use z-index with relative positioning?

问题描述

我有一个严重的问题，z-index和我的代码。我想在每一行上有一个弹出窗口，并相对于该行定位。所以我创建了这个代码：

 < div class =level1> 
< div class =level2> 
< input type =textvalue =test1/> 
< div class =popup> test1< / div> 
< / div> 
< div class =level2> 
< input type =textvalue =test2/> 
< div class =popup> test2< / div> 
< / div> 
< / div> 
  

带有以下样式

  .level1 
 {
 position：relative; 
 z-index：2; 
} 
 .level2 
 {
 position：relative; 
 z-index：3; 
} 
 .popup 
 {
 position：absolute; 
 left：0px; 
 top：10px; 
 width：100px; 
 height：100px; 
 background：yellow; 
 z-index：4; 
} 
  

我知道我做错了事，但我找不到

当你在元素上设置 position：relative 时，我的愚蠢

在该块内的元素上设置z-index只会改变其相对于同一块中其他元素的图层。

我不知道有任何解决方法。

I have a serious problem with z-index and my code. I want to have an popup on every row and positioned relative to that row. So I created this code:

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

with te following style

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}

I know i'm doing something very wrong, but i don't find my stupidity.

解决方案

When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it.

Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.

I'm not aware of any work-arounds.

这篇关于如何使用z-index与相对定位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！