html - 边界半径不考虑 z-index

Question

我有一个标题标签被相邻的 div 覆盖了。我已经为它们设置了 z-index 属性，但它们并没有像我希望的那样工作。我注意到当我将 border-radius 属性与其他杂项一起使用时会发生这种情况。 css 使两个 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;
}

Answer 1

您忘记定位标题 - 添加 position: relative;到 <h2>

http://jsfiddle.net/Ms7Qr/1/ (z-index 不适用于静态定位的元素)

来自Visual Formatting Model :

Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'.