css - z-index，让相同父元素中的子元素不被其它父元素遮挡？
本文介绍了css - z-index，让相同父元素中的子元素不被其它父元素遮挡？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下，基本问题就是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去掉
这篇关于css - z-index，让相同父元素中的子元素不被其它父元素遮挡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
