我有以下代码，希望在(橙色(映射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>不需要对主标记进行样式设置，因为您打算使类("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;
}