html - 试图将元素放在一起

Question

我有一组标题图像，我希望它们被放置在彼此之上。这个想法是，当您将鼠标悬停在我的导航栏中的元素上时，标题图像会转换。当您将鼠标悬停在导航栏上时，我正在使用 javascript 来更改图像的不透明度。

问题是现在图像从上到下加载为 5 个图像，我希望它只显示一个图像在顶部，其余的都堆叠在那个图像后面。

html

<div id="images" class="col-xs-12">
    <img src="http://parksadventure.com/wp-content/uploads/2017/10/header-image-1-2.png" id="picture1" class="img-responsive col-xs-12" alt="Responsive image" width="100%" />
    <img src="https://whatson.ae/dubai/wp-content/uploads/2017/12/dubai-header.jpg" id="picture2" class="img-responsive" alt="Responsive image" width="100%" />
    <img src="https://inventor.challenges.org/wp-content/uploads/sites/25/2015/11/header-image-5.jpg" id="picture3" class="img-responsive" alt="Responsive image" width="100%" />
    <img src="https://us.boge.com/sites/row/files/boge-24h-recovery-header-big.jpg" id="picture4" class="img-responsive" alt="Responsive image" width="100%" />
    <img src="https://i.pinimg.com/originals/f2/de/8b/f2de8b0ad5abc3780a19dc7f78f22114.jpg" id="picture5" class="img-responsive" alt="Responsive image" width="100%" />
</div>




  #images {
padding: 0;
border-bottom: 3px solid red;
border-top: 3px solid red;
overflow:auto;

}

标签： htmlversion-controlheader

Answer 1

position:absolute;在<img />标签上使用。

像这样：

#images img{
  position: absolute;
}

这会将图像堆叠在一起。

希望这可以帮助。