Question

我在使用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>

Answer 1

我认为您正在寻找的是java.lang.ClassNotFoundException: javax.jms.JMSRuntimeException

Answer 2

您正在寻找display财产。

.hidtable{  
    display: none;
}

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/display

此外，您的css代码中存在语法错误，您应该在第一个position: relative之后用分号替换逗号。

Answer 3

z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

如果你不熟悉z轴，想象一下页面上面有几层。每层都有编号。具有较大数字的图层将在具有较小数字的图层上方呈现。

这并不意味着它会隐藏索引较低的图层

使用display:none或visibility:hidden

阅读how does z-index work

Answer 4

如果一个元素位于另一个元素后面并且您仍然可以看到它，原因是前面元素没有背景，因此部分透明。添加背景颜色以更改它。

以下是基于您的代码的代码段中的情况。但是，我改变了很多，因为你的代码是无效的HTML（tr s，而不是td和其他东西。此外，由于您的.content没有除绝对元素以外的任何内容，因此您必须为其提供尺寸参数以涵盖表格：

＆＃13;

.content {
  background-color: #fff;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

.hidtable {
  z-index: -1;
  position: absolute;
}

＆＃13;

<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>

＆＃13;

Answer 5

我建议你只使用z-index来分层元素。隐藏元素我会用

<style>
.hidtable{
    display: none;
}
</style>

这不会显示元素。要让它再次显示，您应该使用：

<style>
.hidtable{
    display: inline;
}
</style>

Answer 6

hidtable是该部分的一部分所以我认为你不能像这样定位它。你只能把事物放在完全独立的元素后面。因此，如果您将表格从章节中删除并为区域添加宽度和高度，那么您应该得到您想要实现的目标。

<!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>

Answer 7

z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。

参考：https://www.w3schools.com/cssref/pr_pos_z-index.asp

z-index不隐藏元素

7 个答案: