z-index 跨浏览器不兼容答案

【问题标题】：z-index cross-browser incompatiblityz-index 跨浏览器不兼容
【发布时间】：2016-06-08 22:19:12
【问题描述】：

这是一个非常短的简单代码的CodePen。

only html and css, and Bootstrap

它显示了一个非常基本的 Bootstrap 轮播，并添加了白色透明覆盖层。轮播标题应该出现在叠加层的顶部，但在 Chrome 浏览器中不会这样显示。不过，Firefox 正在按预期显示它。

我希望文本滑动并出现在所有浏览器的静止覆盖层之上。

【问题讨论】：

CodePen 的链接很棒，但您能否将相关代码段放在有问题的地方，以便人们更好地帮助您？
@PraveenPuglia 相关部分是字幕的 z-index。我希望他们出现在一切之上。他们不是，我只是想知道为什么。
欢迎来到 Stack Overflow！寻求调试帮助的问题必须在问题本身中包含重现它所需的最短代码。 注意 - 请不要滥用代码块来绕过此要求。。跨度>

标签： html css twitter-bootstrap-3 cross-browser z-index

【解决方案1】：

为什么不使用：

CSS

.carousel-inner > .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1;
    opacity: 0.5;
}

而不是单独的 overlay 容器？我的意思是这个容器的 CSS 中甚至有一个 content: ''，所以我猜它曾经是或应该是一个伪元素。

【讨论】：