how do i print three boxes one behind other in css-CodePudding

So let say i have three images same height and width a, b, c. I want a to come in front with full size after than b with a bit small and left part should be covered behind a . and then c smaller than b left part cover by b right side.

i tried using positioning in these boxes like absolute, relative , fixed but in vain

.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <center>
      <div >
        <div ><h1>Digital Card Details</h1></div>
      </div>
      <div >
        <div >
          <img  src="./images/Page1.jpg" alt="failed" />

          <img  src="./images/Page2.jpg" alt="failed" />

          <img  src="./images/Page3.jpg" alt="failed" />
        </div>
        <!-- <a href=""></a> -->
      </div>
    </center>
  </body>
</html>

.css

.rcorners1 {
  border-radius: 70px;
  /* background: #73ad21; */
  background-image: url(./images/Background.jpg);
  padding: 20px;
  /* flex: auto; */
  width: 950px;
  height: 250px;
}

.rcorners2 {
  border-radius: 25px;
  background: white;
  border: 1px solid brown;
  /* border: brown; */
  /* background-image: url(./images/Background.jpg); */
  padding: 20px;
  /* float: none; */
  /* position: absolute; */
  margin-top: -150px;
  /* flex: auto; */
  width: 800px;
  height: 400px;
}

.text {
  color: white;
}

.leftWrapper {
  float: left;
  width: 32%;
  height: 650px;
}
.image1 {
  position: fixed;
  width: 260px;
  padding: auto;
  height: 380px;
  margin: 1px;
  /* padding: 4px; */
  border: 4px solid white;
  margin-left: -200px;
  outline-style: groove;
  outline-color: brown;
}

.image2 {
  /* position: absolute; */
  border: 4px solid white;
  width: 220px;
  height: 320px;
  top: 30px;
  left: 30px;
  /* padding: auto; */
  outline-style: groove;
  outline-color: brown;
  /* outline-width: 12px; */
  /* border: 1px green solid; */
  margin-bottom: 38px;
  margin-left: -100px;
}

.image3 {
  width: 150px;
  /* position: relative; */
  outline-style: groove;
  border: 4px solid white;
  /* outline-color: brown; */
  height: 220px;
  top: 30px;
  left: 30px;
  padding: auto;

  margin-bottom: 100px;
  /* margin-left: px; */
}

Output - Output

But i want something like Expected

CodePudding user response：

This is starting to look like your "expected": https://codepen.io/kodmunki/pen/wvyJPbV

<div >
  <div >a</div>
  <div >b</div>
  <div >c</div>
</div>

.container {
  position: relative;
}

.a,.b,.c {
  position: absolute;
  border: 1px solid #000;
}

.a {
  width: 100px;
  height: 100px;
  background-color: #ff0000aa;
  z-index: 3;
}

.b {
  top: 20px;
  left: 65px;
  width: 75px;
  height: 75px;
  background-color: #ffff00aa;
  z-index: 2;
}

.c {
  top: 30px;
  left: 125px;
  width: 50px;
  height: 50px;
  background-color: #ff00ffaa;
  z-index: 1;
}