z-index不隐藏元素
[英]z-index not hide element
问题描述
我在使用z-index时遇到麻烦，我想将.hidtable放在节的后面，但是它在前面，有人可以帮我弄清楚问题出在哪里吗？ 也许我想念什么？
.content{ position:relative, z-index:0 } .hidtable{ z-index: -1; position: absolute; }
<section class="content"> <table class="hidtable"> <thead > <th>th1</th> <th>th2</th> </thead> <tr>tr1</tr> <tr>tr2</tr> </table> </section>
7 个解决方案
解决方案1
0 2017-10-25 16:54:53
我认为您要寻找的是visibility: hidden;
解决方案2
0 2017-10-25 16:55:55
您正在寻找display属性。
.hidtable{
display: none;
}
更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/display
此外，您的CSS程式码中有语法错误，您应该在第一个position: relative后面加上逗号，并以分号代替。
解决方案3
0 2017-10-25 16:56:26
z-index属性指定元素的堆栈顺序。
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
如果您不熟悉z轴，可以想象页面有一层以上一层。 每层都有编号。 具有较大编号的层将呈现在具有较小编号的层之上。
这并不意味着它将隐藏索引较低的图层
使用display:none或visibility:hidden
解决方案4
0 2017-10-25 16:58:08
如果一个元素在另一个元素的后面，但您仍然可以看到它，则原因是前一个元素没有背景，因此部分透明。 添加背景色以更改该颜色。
这是根据您的代码片段的情况。 但是，我做了很多修改，因为您的代码是无效的HTML（ tr ，而不是td和其他东西）。 另外，由于.content除了绝对元素之外没有其他内容，因此必须给它提供size参数以覆盖表格：
.content { background-color: #fff; width: 300px; height: 200px; border: 1px solid red; } .hidtable { z-index: -1; position: absolute; }
<section class="content"> <table class="hidtable"> <thead> <tr> <th>th1</th> <th>th2</th> </tr> </thead> <tbody> <tr> <td>tr1</td> <td>tr2</td> </tr> </tbody> </table> </section>
解决方案5
0 2017-10-25 17:02:57
我建议您仅使用z-index对元素进行分层。 隐藏一个我会用的元素
<style>
.hidtable{
display: none;
}
</style>
这不会显示该元素。 要使其再次显示，您应该使用：
<style>
.hidtable{
display: inline;
}
</style>
解决方案6
0 已采纳 2017-10-25 17:51:17
隐藏表是该部分的一部分，因此我认为您不能将其放在后面。 您只能将事物放置在完全独立的元素后面。 因此，如果您将表格从剖面中取出，并在剖面中添加了宽度和高度，则应该得到想要达到的目标。
<!DOCTYPE>
<html>
<head>
</head>
<body>
<style>
.content {
position: absolute;
z-index: 0;
width: 100%;
height: 100px;
top: 0;
left: 0;
background: #ffffff;
}
.hidtable {
z-index: -1;
position: absolute;
top: 0;
left: 0;
background: #ffffff;
display: block;
}
</style>
<section class="content">
</section>
<table class="hidtable">
<thead>
<th>th1</th>
<th>th2</th>
</thead>
<tbody>
<td>tr1</td>
<td>tr2</td>
</tbody>
</table>
</body>
</html>
解决方案7
-1 2019-01-12 07:44:12
z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。
隐藏较低z-index的div之下的元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.