Question

我正在为一个学校项目的网站工作，我已经制作了一个图片幻灯片，但问题是我想在图片上添加h1标签，但它不起作用！

我尝试过改变各种事情，但没有成功。以下是代码段：

#slideshow {
  overflow: hidden;
  text-align: center;
  color: #ffffff;
}
#slideshow h1 {
  position: absolute;
  margin-top: 100px;
}

<section id="slideshow">
  <h1>Space</h1>
  <figure class="img-container">
      <img class="img" src="http://via.placeholder.com/150x150">
      <img class="img" src="http://via.placeholder.com/150x150">
      <img class="img" src="http://via.placeholder.com/150x150">
   </figure> 
</section>

Answer 1

试试这个：

的CSS：

#slideshow {
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  position:relative;
}
#slideshow h1 {
  position: absolute;
  top: 100px;
  left: 5px; //offet from left side to be more legible   
}

Answer 2

您需要提供#slideshow position: relative因为position: absolute的元素（例如您的h1）将相对于其最近的祖先定位。

position-CSS | MDN

Answer 3

你只需要将位置#slideshow h1从绝对位置设置为相对

＆＃13;

#slideshow {
  overflow: hidden;
  text-align: center;
  color: #ffffff;
}
#slideshow h1 {
  position: relative;
  margin-top: 100px;
  color:black;
}

＆＃13;

<section id="slideshow">
  <h1>TESTING</h1>
  <figure class="img-container">
      <img class="img" src="http://via.placeholder.com/150x150">
      <img class="img" src="http://via.placeholder.com/150x150">
      <img class="img" src="http://via.placeholder.com/150x150">
   </figure> 
</section>

＆＃13;

Answer 4

这是一个非常简单的问题。我会教你如何做到这一点！您需要将幻灯片上的z-index更改为0，将h1更改为1.这意味着h1将位于幻灯片显示部分的顶部。 Z-index是元素的Z轴定位。

#slideshow {
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  z-index: 0;
}
#slideshow h1 {
  position: absolute;
  margin-top: 100px;
  z-index: 1;
}

在html / css

4 个答案: