html - z-index 不隐藏元素

标签 html css

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

最佳答案

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>

关于html - z-index 不隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46937998/

相关文章:

javascript - 为什么此搜索框不选择点击时的所有文本?

php - XSLT 转换搞砸了 <br/> 标签

javascript - 如何获取用户输入的文本并将其渲染到页面上的元素?

html - A11y 用于空 anchor 标签

css - 我如何使整个图 block (即导航菜单中的选项卡)成为超链接的一部分

html - 悬停时出现 Div

javascript - 如何在 Javascript 中对句子进行标题大小写

javascript - asp.net 如何让网站达到全宽和全高

html - Bootstrap 固定侧边栏导致主要内容重叠

python - Flask 中的 CSS 文件出现 404 错误