Question

我试图将div .header-content放在另一个div .header-bg之上，其中包含背景封面和使用z-index的高度。

如果我将.header-bg更改为position:absolute，则背景图片会消失，但.header-content位于正确的位置。如果我将其更改为position: relative，则会显示背景，但内容位于背景图片之后，而不是位于背景图像之上。

有没有人遇到过同样的问题？

HTML

<body>
        <div class="header header-bg"></div>
        <div class="header home-header">

            <div class="header-content">
                <a href="#" class="logo txtimg" title="Back to Homepage">LOGO</a>
                <p class="slogan">SLOGAN</p>
            </div>

            <div class="header slider">
                <div class="slider-navbar">
                </div>
            </div>

            <navbar class="menu home-menu">
                test
            </navbar>
        </div>
    </body>

CSS

.logo{
    background: url(img/logo.png) no-repeat;
    height: 96px;
    width: 402px;
    display: block;
    margin: 0 auto;
    padding-bottom: 1em;
}

.slogan {
    color: #fff;
    text-align: center;
    width: 940px;
    margin: 0 auto;
    margin-top: 10px;
}

/*.css-img-replacement*/
.txtimg {
    text-indent: -9999em;
    overflow: hidden;
}

.header-bg{
    background: #bf1718 url(img/header_bg.png) no-repeat 50% !important;
    background-size: cover;
    z-index:0;
    position: relative;
}

.header {
    height:588px;
}

.header-content {
    padding: 1em 0;
    z-index: 900;
    position: absolute;
}

（对不起，如果我犯了一些英语错误，我是法语，希望你能理解）

Answer 1

您应该为.header-content赋予其最高位置的值：

.header-content {
    padding: 1em 0;
    z-index: 900;
    position: absolute;
    top: 0;
}

当没有添加顶部，右侧，底部或左侧定位的值时，绝对元素将保持其静态位置。静态位置是当未指定position属性时元素在页面流中将具有的位置。

背景封面和z-index问题

1 个答案: