html - border-radius not respecting z-index

Question

I have a heading tag that is being covered up by an adjacent div. I have set z-index properties on them and they are not working like I want them to. I notice that this happens when I use the border-radius property in tandem with other misc. css to cause the alignment of both DOM elements to cross over each other. But, they are crossing in what is the wrong order for what I need. Any ideas?

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不适用于静态定位的元素）

从视觉格式模型：

其他堆叠上下文由任何具有“z-index”计算值而不是“auto”的定位元素（包括相对定位的元素）生成。