Question

我一直致力于响应式网页设计，在添加CSS以使链接保持在图像中心后，网页现在显示图像背后的任何新html。我希望能够在我的网页上添加更多内容，但我写的任何新的html都会消失。 Link to JSFIDDLE https://jsfiddle.net/R4bbit2k17/7yuL4y1p/1/#&togetherjs=MEzytpw3kf`

Answer 1

由于您的.banner-inner正在使用 position: absolute 并与 width 的<{1}}和< strong> height ，您需要为文本元素设置静态100%，并为其提供 z-index 大于默认值position：

这会使您的文字显示在图片顶部，可以在以下内容中看到：

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;
}

希望这有帮助！

所有新的HTML都出现在图像后面？

1 个答案: