所以我有以下个人网站代码:
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
}
我试图让 h 标签内的“姓名”和“交互式简历”位于覆盖层顶部的顶层，但无论我尝试什么，它似乎都卡在绿色覆盖层后面。我试过使用 z-index 但无济于事。我对前端很陌生，所以任何帮助都将不胜感激。
最佳答案
您需要将您的#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/
关于html - 使标题 div 位于顶层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27182197/