两列的Z-Index

问题描述

我想在左侧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>

解决方法

它“不起作用”，因为您没有在左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>

我在图像容器中添加了一个溢出，并且可以正常工作。

html z-index