所有新的HTML显示在图像后面？

我一直在做一个响应性的网页设计，在添加CSS使链接保持在图像中心后，网页现在会在图像后面显示任何新的html。我希望能够在我的网页上添加更多内容，但我编写的任何新html都会消失。

---

链接到JSFIDDLE

`

因为您的

.banner-inner

正在使用并占用和的

100%

，您需要为文本元素设置一个

位置，而不是静态位置，同时给他们一个大于默认值
0
的：

p {
  background: red; /* Purely to highlight the text */
  position: relative;
  z-index: 1;
}

这会使文本显示在图像顶部，并可在以下位置看到：


正文{
字体系列：helvetica；
字体大小：15px；
线高：1.5；
填充：0；
保证金：0；
背景色：#F4；
}
标题{
背景：黑色；
颜色：白色；
填充顶部：20px；
最小高度：45px；
}
标题a{
颜色：白色；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
标题ul{
保证金：0；
填充：0；
}
头李{
浮动：左；
显示：内联；
填充：0 20px 0 20px；
}
标题导航{
浮动：对；
边缘顶部：5px；
}
@仅介质屏幕和（最大宽度：1000px）{
.居中{
字体大小：12pt！重要；
}
}
@仅介质屏幕和（最大宽度：800px）{
.居中{
字体大小：11pt！重要；
}
}
@仅介质屏幕和（最大宽度：600px）{
.居中{
字体大小：10pt！重要；
}
}
@仅介质屏幕和（最大宽度：400px）{
.居中{
字体大小：9pt！重要；
}
}
@仅介质屏幕和（最大宽度：200px）{
.居中{
字体大小：8pt！重要；
}
}
.旗内{
宽度：100%；
身高：100%；
位置：绝对位置；
文本对齐：居中；
颜色：白色；
}
.居中{
位置：绝对位置；
左边距：自动；
右边距：自动；
宽度：100%；
高度：自动；
利润率最高：20%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
字号：12号；
}
.img{
宽度：100%；
高度：自动；
浮动：左；
}
p{
背景：红色；
位置：相对位置；
z指数：1；
}






任何添加的HTML都会显示在图像后面，我不知道如何将其更改为显示在图像下面，就像使用新的HTML页面一样

因为您的
.banner-inner
正在使用并占用和

的

100%

，所以您需要为文本元素设置一个

位置，而不是静态位置，同时给他们一个大于默认值
0
的：

p {
  background: red; /* Purely to highlight the text */
  position: relative;
  z-index: 1;
}

这会使文本显示在图像顶部，并可在以下位置看到：


正文{
字体系列：helvetica；
字体大小：15px；
线高：1.5；
填充：0；
保证金：0；
背景色：#F4；
}
标题{
背景：黑色；
颜色：白色；
填充顶部：20px；
最小高度：45px；
}
标题a{
颜色：白色；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}
标题ul{
保证金：0；
填充：0；
}
头李{
浮动：左；
显示：内联；
填充：0 20px 0 20px；
}
标题导航{
浮动：对；
边缘顶部：5px；
}
@仅介质屏幕和（最大宽度：1000px）{
.居中{
字体大小：12pt！重要；
}
}
@仅介质屏幕和（最大宽度：800px）{
.居中{
字体大小：11pt！重要；
}
}
@仅介质屏幕和（最大宽度：600px）{
.居中{
字体大小：10pt！重要；
}
}
@仅介质屏幕和（最大宽度：400px）{
.居中{
字体大小：9pt！重要；
}
}
@仅介质屏幕和（最大宽度：200px）{
.居中{
字体大小：8pt！重要；
}
}
.旗内{
宽度：100%；
身高：100%；
位置：绝对位置；
文本对齐：居中；
颜色：白色；
}
.居中{
位置：绝对位置；
左边距：自动；
右边距：自动；
宽度：100%；
高度：自动；
利润率最高：20%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
字号：12号；
}
.img{
宽度：100%；
高度：自动；
浮动：左；
}
p{
背景：红色；
位置：相对位置；
z指数：1；
}






任何添加的HTML都会显示在图像后面，我不知道如何将其更改为显示在图像下面，就像使用新的HTML页面一样

感谢您解决了这个问题，现在我遇到的另一个问题是，所有新的I代码都位于页面顶部，而不是像在没有格式的新html页面中那样从图像下方开始，这是
位置的警告：绝对
；它将元素从流中取出。在这方面，你要寻找的是
位置：相对的
。好的，所以基本上我要找的是在图像上有一个图像和一个链接，我希望网站能够响应，我需要链接保持在我图像的中心，无论我在台式机、笔记本电脑上查看网站，无论它是什么，我只需要“开始学习“链接停留在图像的中间，而不是在不同设备上观看时跳转页面。我还希望能够添加更多的html和css，而不会中断图像上的链接。我需要在图片的正下方添加一个4列的部分，所以我真的需要帮助理解如何正确执行此操作BSIDian您确实回答了我的问题，只是花了一秒钟的时间来处理我的代码。。。非常感谢你！很高兴你终于到了那里！一旦你确认这解决了你的问题，请别忘了点击投票按钮下方的灰色复选框——这会将其从“未回答问题”中删除