具有两列的 Z-Index

Question

我想在左边 div 下得到未绘制的草图（右边有 10px 的边距），我已经尝试了 Z-Index 的多个选项，但它们都不起作用。我尝试添加任何位置，但它们都不起作用。希望你能帮帮我！

html,body{
  margin: 0;
  border-style: none;
  padding: 0;
}

.left{
  width: 50%;
  height: 100vh;
  float:left;
}

.right{
  width: 50%;
  right:0;
  height: 100vh;
  float:right;
  background-color: #EA8E81;
}

.image-corrector{
  display: flex;
  align-items: center;
  float:left;
  height: 100vh;
  margin-left: -10px;
}

.sketch-travel{
  height: 160px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Login WiFi | Corendon Airlines</title>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400,500,600,700,800" />
    <link rel="stylesheet" href="./assets/css/main.css">
  </head>
  <body>
    <div class="main">
      <div class="left">
      </div>

      <div class="right">
        <div class="image-corrector">
          <img src="./assets/images/undraw_travel_booking_6koc.svg" alt="Sketch" class="sketch-travel">
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

它“不起作用”，因为您没有在左边设置颜色 div，所以看起来它不起作用，左边是透明的，草图在它下面...

.left{
  width: 50%;
  height: 100vh;
  float:left;
  background-color:white;
  position: absolute;
  z-index: 10;
}

示例：

html,body{
  margin: 0;
  border-style: none;
  padding: 0;
}

.left{
  width: 50%;
  height: 100vh;
  float:left;
  background-color:white;
  position: absolute;
  z-index: 10;
}

.right{
  width: 50%;
  right:0;
  height: 100vh;
  float:right;
  background-color: #EA8E81;
}

.image-corrector{
  display: flex;
  align-items: center;
  float:left;
  height: 100vh;
  margin-left: -10px;
}

.sketch-travel{
  height: 160px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Login WiFi | Corendon Airlines</title>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400,500,600,700,800" />
    <link rel="stylesheet" href="./assets/css/main.css">
  </head>
  <body>
    <div class="main">
      <div class="left">
      </div>

      <div class="right">
        <div class="image-corrector">
          <img src="./assets/images/undraw_travel_booking_6koc.svg" alt="Sketch" class="sketch-travel">
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

我已将溢出添加到图像容器并且有效。

具有两列的 Z-Index

Z-Index with two columns

html

css

z-index