Question

我有一个标题标签被相邻的div掩盖。我已经为它们设置了z-index属性，它们不像我想要的那样工作。我注意到当我将border-radius属性与其他misc一起使用时会发生这种情况。 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：

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

border-radius不尊重z-index

1 个答案: