Question

所以我在个人网站上有以下代码：

HTML：

<html>
    <head>
        <meta charset="utf-8">
        <title>Name</title>
        <link rel="stylesheet" href="assets/css/style.css">
        <script src="js/jquery-1.11.1.min.js"></script>

    </head>

    <body>
        <div id="jumbotron">
            <div id="title-container">
                <h1>Name</h1>
                <h3>Interactive Resume</h3>
            </div>
            <div id="jumbotron-overlay"></div>
        </div>
        <div id="profile"></div>

    </body>
</html>

和CSS：

body {
    background: url(../img.jpg) no-repeat top center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

h1, h3 {
    color: #fff;
    text-align: center;
}

h1 {
    margin-top: 400px;
    margin-bottom: 0px;
    font-size: 62pt;
}

h3 {
    margin-top: 20px;
    font-size: 24pt;
}

#title-container {
    width: 100%;
    height: 200px;
}

#jumbotron {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 600px; //FIXME

}

#jumbotron-overlay {
    background-color: #6ACF56;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 1000px;
    opacity: .5;
}

#profile {
    width: 100%;
    height: 640px;
    background-color: white
}

我试图获得我的名字＆＃34;和＃34;互动简历＆＃34;在h标签内部位于覆盖层顶部的顶层，但无论我尝试什么，它似乎都被卡在绿色覆盖层后面。我尝试过使用z-index但无济于事。我对前端很陌生，所以任何帮助都会受到赞赏。

Answer 1

您需要将＃title-container设置为相对位置并调整z-index

#title-container {
   width: 100%;
   height: 200px;
   position:relative;    /*Updated here*/
   z-index:1;    /*Updated here*/
}

这是一个JSFiddle http://jsfiddle.net/2cpnb9ja/1/

Answer 2

z-index仅在设置位置时有效。

http://jsfiddle.net/wilchow/z4c7r70t/3/

body {
    background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

h1, h3 {
    color: #fff;
    text-align: center;
    position:relative;
    z-index:1000;
}

h1 {
    margin-top: 400px;
    margin-bottom: 0px;
    font-size: 62pt;
}

h3 {
    margin-top: 20px;
    font-size: 24pt;
}

#title-container {
    width: 100%;
    height: 200px;
}

#jumbotron {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 600px; //FIXME

}

#jumbotron-overlay {
    background-color: #6ACF56;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 1000px;
    opacity: .5;
    z-index:500;
}

#profile {
    width: 100%;
    height: 640px;
    background-color: white
}

获得标题div在顶层

2 个答案: