堆栈顺序问题：在兄弟姐妹的第一个孩子之上和兄弟姐妹的第二个孩子之下显示元素

Question

我有以下代码，并希望在（橙色）地图 div 上，但在（橄榄色）覆盖 div 下显示 标题字符串。我对 z 索引的尝试（见下面的代码）没有奏效。我在这里想念什么？ （我将转换保留在 css 代码中，因为它们可能会改变堆栈顺序。）

body,
.root {
  position: relative;
  margin: 0;
  padding: 0;
  transition: transform 1s ease;
}

.main {
  position: relative;
  transition: 1s ease;
  transform: translateX(0px);
}

.map {
  position: relative;
  background-color: orange;
  z-index: 1;
}

.overlay {
  position: absolute;
  width: 95%;
  top: 0;
  left: 5%;
  right: 0;
  bottom: 0;
  transition: 1s ease;
  background-color: olive;
  z-index: 100;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  z-index: 10;
}

<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="root">
    <div class="main">
      <div class="map">.</div>
      <div class="overlay"></div>
    </div>
    <div class="title">Title Title Title Title</div>
  </div>
</body>

</html>

Answer 1

不需要对主标签进行样式设置，因为您打算使类（'title'）位于覆盖标签之下但在类（'map'）之上

这里有一个解决问题的方法：

body{
    margin: 0;
    padding: 0;
    position: relative;
}

.root {
  transition: transform 1s ease;
}

.map {
  background-color: orange;
  width: 60%;
  padding-left: 5px;
}

.overlay {
  position: absolute;
  width: 95%;
  top: 0;
  left: 5%;
  right: 0;
  bottom: 0;
  transition: 1s ease;
  background-color: olive;
  z-index: 10;
}

.title {
  position: absolute;
  left: 10px;
  top: 0;
  font-weight: bold;
}