How to put images behind each other in css

Question

In this layout I have 3 responsive images that are displayed one after each other. But as I am trying to create an image slider, ideally I want only one image to appear and the rest would be hidden behind that image. There goes my 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>

And the css code for the slider section and the image is as it goes:

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

How can I solve this problem and remain the responsiveness?

Answer 1

As you have them in the same container (#slider) you can display them as position: absolute and they will be positioned on the top-left corner of its container.

I have created an example in which they dissapear when you click on them. Now you will have to hide/display them as your slider needed with JQuery.

$('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>