z-index在使用负边距时不起作用

我遇到了z-index堆叠的问题。下面的div出现在顶部div的顶部，即使z-index和positions声明下面的div应该位于它上面的div下。z-index在使用负边距时不起作用

我提供了一个JSFiddle的示例代码，我正在使用。

.above-box { 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    background: rgba(251, 47, 111, 0.2); 
 
    color: #fff; 
 
    z-index: 10 !important; 
 
    position: relative !important; 
 
    margin-top: 0px !important; 
 
    margin-right: 0px !important; 
 
    margin-left: 0px !important; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.below-box { 
 
    margin-top: -20px !important; 
 
    margin-left: 70px !important; 
 
    position: relative !important; 
 
    z-index: 5 !important; 
 
    background-color: #f00; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="above-box"> 
 
    TEST 
 
</div> 
 

 
<div class="below-box"> 
 
    TEST 
 
</div>

来源

2016-03-21 ALN90

你的代码工作得很好......因为你的不透明度很低，所以如下显示 –

谢谢你的帮助。它实际上在小提琴中工作，但不在我的网站上。 '.below-box'实际上是我网站上的图片，'.above-box'中有一些文字，里面有一个链接，这张图片包含在内。即使当我将rgba更改为1时，下面框中的图像仍然覆盖链接。如果有帮助，我使用的是Visual Composer的WordPress，'.below-box'位于'.above-box'下面一行。 – ALN90

嗨ALN90，不幸的是你需要创建一个Minimal，** Complete **，Verifiable例。你的例子并不是你的问题的完整再现。请将足够的代码从您的网站复制到JSFiddle以重现真正的问题，否则我们将无法回答此问题。 – TylerH

它实际上是工作。小心你的RGB的值为.above-box格。

第四值是不透明度参数，这里不透明度设置为1：

background:rgba(251,47,111,1);

See this fiddle

此外，它不需要在CSS代码添加!important;几乎无处不在。

编辑：对于您的问题，请在添加z-index属性之前再次检查DOM中每个元素的位置。 z-index属性与DOM文档中相同级别的元素正常工作。

Like this example

另外，还可以对这个职位阅读本很好的z-index的解释： Z-Index Relative or Absolute?

希望有所帮助。

来源

2016-03-21 11:35:19

谢谢你的帮助。它实际上在小提琴中工作，但不在我的网站上。 '.below-box'实际上是我网站上的图片，'.above-box'中有一些文字，里面有一个链接，这张图片包含在内。即使当我将rgba更改为1时，下面框中的图像仍然覆盖链接。如果有帮助，我在Visual Composer中使用WordPress，'.below-box'位于'.above-box'下方的行中。 – ALN90

也许用更类似于您的问题的代码更新小提琴，然后我将尝试修复它并将其解释给你:) 你也可以做一个问题的截图。 –

由于行，列，类等因素，小提琴将显得太难。问题的屏幕截图：http://thenewsomeway.co.uk/zindex-problems.jpg 文本框css是： {padding-left：50px; padding-right：50px; padding-top：20px; padding-bottom：20px;背景：RGBA（251,47,111,0.2）;颜色：#fff;的z-index：10重要;位置：相对！重要; margin-top：-200px！important; margin-right：500px！important; margin-left：-260px！important; } 图像的CSS是：{margin-top：-350px！important; margin-left：70px！important; ！位置：相对重要;的z-index：5个重要; } – ALN90

z-index在使用负边距时不起作用

回答

相关问题