How can I position one item in front of another using CSS?-CodePudding

I am creating a website for a small project. One of the web pages includes a slideshow that should be manually operated using two buttons. How can i have the buttons placed infront of the slideshow image?

.slideshow-container {
  border: solid black 5px;
  border-radius: 20px;
  margin: 70px;
  box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
  width: 550px;
}

#slideShowImage {
  width: 100%;
  border-radius: 3%;
  display: block;
}

.slideshow-buttons {
  display: flex;
  justify-content: space-around;
}

<section >
  <img id="slideShowImage" src="https://via.placeholder.com/450x150" alt="slideshow">
  <div >
    <button  onclick="plusDivs(-1)">&#10094;</button>
    <button  onclick="plusDivs( 1)">&#10095;</button>
  </div>
</section>


<footer >

</footer>

I have tried changing the position on the image to absolute and the buttons to relative (& the other way around because i dont know what im doing)

CodePudding user response：

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Womxn Skate History</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="stylesheet" href="..\css\bootstrap.min.css">
    </head>

    <header> 

    </header>

    <body >
            <section >
         
                <img id="slideShowImage" src="img1.jpeg" alt="slideshow"/>
                <div >
                    <button  onclick="plusDivs(-1)">&#10094;</button>
                    <button  onclick="plusDivs( 1)">&#10095;</button>
                </div>  
            </section>

        </div>
    </body>

    <footer >

    </footer>

    <script src="JS/script.js"> </script> 
</html>

CSS:

.slideshow-container {
  border: solid black 5px;
  border-radius: 20px;
  margin: 70px;
  box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
  width: 550px;
  position: relative;
}

#slideShowImage {
  width: 100%;
  border-radius: 3%;
  display: block;
  object-fit: cover;
}

.slideshow-button-right {
  position: absolute;
  left: 15px;
  top: 50%;
}

.slideshow-button-left {
  position: absolute;
  right: 15px;
  top: 50%;
}

CodePudding user response：

You can use the position Property in CSS. Please use the below link and get an idea. https://www.w3schools.com/css/css_positioning.asp

CodePudding user response：

You have to try and use Z-Index concept. This allows you to layer different HTML elements. I am attaching some links below: https://www.w3schools.com/CSSref/pr_pos_z-index.php https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

This will help you with your use case