边框半径不遵循 z-index 属性

Question

我有一个标题标签被相邻的 div 遮盖住了。我已经在它们上面设置了 z-index 属性，但它们并没有按照我的要求工作。我注意到，当我使用 border-radius 属性与其他混合样式一起使用时，会导致两个 DOM 元素的对齐相互交叉。但是，它们交叉的顺序不符合我的需求。有什么想法吗？ Fiddle :)

h2 {
    font-size: 2.5em;
    background-color: #e5dbc2;
    display: inline-block;
    padding-right: 10px;
    line-height: 70%;
    margin-bottom: 0;
    z-index:999;
}


.cover {
    position:relative;
    width: 100%;
    height: 300px;
    padding: 0;
    border-radius: 0 0 20px 20px;
    background-color: #efe8d9;
    border-top: 5px solid #6e537f;
    margin-top: -7px;
    overflow: hidden;
    z-index: 500;
}

- smilebomb

Answer 1

您忘记为标题设置位置 - 在 <h2> 中添加 position: relative; 此处是一个 jsfiddle 链接：http://jsfiddle.net/Ms7Qr/1/ （z-index 不适用于静态定位元素）

从 可视化格式模型 中得知：

任何定位元素（包括相对定位元素）计算出的 'z-index' 值不为 'auto' 时，都生成其他堆叠上下文。

- Adrift

---

<div style="position: absolute; border-radius:20px; z-index:100;"> <div style="position: fixed; z-index:10;">> </div> </div> 这段代码是我正在尝试的一个示例。在 Nexus 设备上，固定的 div 元素数据不像其他设备一样正常工作，我无法解决这个问题。如果我删除 border-radius，一切都能正常工作。有没有什么办法可以解决这个问题，使其在固定位置而不是相对位置下正常工作？ - Mohan Gopi