jquery - 如何在CSS中将图像放在彼此后面

Question

在这个布局中，我有 3 个响应图像，它们一个接一个地显示。但是当我尝试创建一个图像 slider 时，理想情况下我只希望出现一个图像，其余图像将隐藏在该图像后面。我的 html:

<header>
    <span><i class="fa fa-phone" aria-hidden="true"></i> Cell Phone</span>
    <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
</header>           
<!------------Navigation area--------------------------->
<div class="logo">
    <img src="" alt="Image">
</div>
<nav>
    <ul class="topnav">
        <li class="icon">
            <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
        </li>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#"> ABOUT</a></li>
        <li><a href="#">CONSULTING SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>         
<!------------Slide Section---------------------------->              
<section id="slider">
    <img src="image/291H.jpg" alt="Important Images">
    <img src="image/305H.jpg" alt="PIGS">
    <img src="image/251H.jpg" alt="ROADS will be here">
</section>

slider 部分和图像的 css 代码是这样的:

img{
    width:100%;
}
#slider{
    width: 100%;
    overflow:hidden;
}

如何解决这个问题并保持响应能力？

Answer 1

因为您将它们放在同一个容器中 (#slider)，您可以将它们显示为 position: absolute，它们将位于其左上角容器。

我创建了一个示例，其中当您单击它们时它们会消失。现在，您必须根据 JQuery 所需的 slider 隐藏/显示它们。

$('img').each(function() {
     $(this).click(function() {
     		$(this).hide();
     });
});

img{
    position: absolute;
    width:100%;
}
#slider{
    width: 100%;
    overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <span><i class="fa fa-phone" aria-hidden="true"></i> Cell Phone</span>
    <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
</header>           
<!------------Navigation area--------------------------->
<div class="logo">
    <img src="" alt="Image">
</div>
<nav>
    <ul class="topnav">
        <li class="icon">
            <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
        </li>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#"> ABOUT</a></li>
        <li><a href="#">CONSULTING SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>         
<!------------Slide Section---------------------------->              
<section id="slider">
    <img src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" alt="Important Images">
    <img src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" alt="PIGS">
    <img src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" alt="ROADS will be here">
</section>