我如何在 css 中一个接一个地打印三个盒子

Question

假设我有三张相同高度和宽度的图像 a、b、c。我想让 a 以全尺寸排在前面而不是 b 有点小，左边的部分应该被覆盖在 a 后面。然后c比b小的左边部分被b右边覆盖。

我尝试在这些框中使用绝对定位、相对定位、固定定位，但都是徒劳

.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 class="rcorners1">
        <div class="text"><h1>Digital Card Details</h1></div>
      </div>
      <div class="rcorners2">
        <div class="left-wrapper">
          <img class="image1" src="./images/Page1.jpg" alt="failed" />

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

          <img class="image3" 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

但我想要类似的东西 Expected

Answer 1

这开始看起来像您的“预期”：https://codepen.io/kodmunki/pen/wvyJPbV

<div class="continer">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">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;
}

我如何在 css 中一个接一个地打印三个盒子

how do i print three boxes one behind other in css

css

flexbox

box