在添加CSS使链接保持在图像的中心位置之后，我一直在进行自适应Web设计，网页现在在图像后面显示了任何新的html。我希望能够在网页上添加更多内容，但是我写的所有新HTML都消失了。Link to JSFIDDLE https://jsfiddle.net/R4bbit2k17/7yuL4y1p/1/#&togetherjs=MEzytpw3kf`
最佳答案
由于您的.banner-inner与position: absolute和100%的width一起使用height，因此您需要为文本元素设置除静态以外的position并赋予它们z-index大于默认值0：
p {
background: red; /* Purely to highlight the text */
position: relative;
z-index: 1;
}
这会使您的文本出现在图像的顶部，并且可以在以下内容中看到：
body {
font-family: helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
header {
background: black;
color: white;
padding-top: 20px;
min-height: 45px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
float: right;
margin-top: 5px;
}
@media only screen and (max-width:1000px) {
.centered {
font-size: 12pt!important;
}
}
@media only screen and (max-width:800px) {
.centered {
font-size: 11pt!important;
}
}
@media only screen and (max-width:600px) {
.centered {
font-size: 10pt!important;
}
}
@media only screen and (max-width:400px) {
.centered {
font-size: 9pt!important;
}
}
@media only screen and (max-width:200px) {
.centered {
font-size: 8pt!important;
}
}
.banner-inner {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
color: white;
}
.centered {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
margin-top: 20%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 12pt;
}
.img {
width: 100%;
height: auto;
float: left;
}
p {
background: red;
position: relative;
z-index: 1;
}<body>
<header>
<div id="header-inner">
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="courses.html" class="current">Courses</a></li>
<li><a href="about.html" class="current">About</a></li>
</ul>
</nav>
</div>
</header>
<section class="section-1">
<div class="banner-inner">
<img class="img" alt="" src="https://d2mt0dng9y3p4j.cloudfront.net/newandimproved/wp-content/uploads/2016/12/shop-with-a-sheriff-mockup.jpg">
<div class="centered"><a href="courses.html">Start Learning</a></div>
</div>
</section>
<p>ANY HTML ADDED APPEARS BEHIND THE IMAGE AND I CANNOT FIGURE OUT HOW TO CHANGE IT TO APPEAR BENEATH THE IMAGE AS IT WOULD WITH A FRESH HTML PAGE</p>
</body>希望这可以帮助！