极客观点
项目管理
HarmonyOS
代码如下，基本问题就是tooltip1被container2挡住了，dom结构不改变的前提下，怎么解决这个问题呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background-color: #eee;
}
.container {
height: 300px;
width: 300px;
position: absolute;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.24);
z-index: 0;
background-color: #ffffff;
}
.sub-container {
height: 100%;
width: 100%;
z-index: 1;
position: relative;
}
.tooltip {
position: absolute;
width: 200px;
height: 100px;
background-color: #333333;
color: #ffffff;
top: 150px;
left: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<div class="container" style="left: 0">
<div class="sub-container">
<div class="tooltip">这是提示1</div>
</div>
</div>
<div class="container" style="left: 310px">
<div class="sub-container">
<div class="tooltip">这是提示2</div>
</div>
</div>
<div class="container" style="left: 620px">
<div class="sub-container">
<div class="tooltip"> 这是提示3</div>
</div>
</div>
</body>
</html>说明一下，有个前提是container的z-index必须相同，因为是抽取出来的有问题的代码，所以，实际还有这个限制条件
把.container里z-index:0去掉