如何让.footerdiv在z轴层级覆盖.tr2？z-index失效问题求助

嘿，刚接触前端遇到这种布局坎儿太正常啦，别慌！我帮你梳理下问题所在，一步步解决~

问题根源分析 #

你遇到的z-index不生效，主要有两个核心原因：

1. HTML结构错误：你的三个<a>标签都没闭合，浏览器会自动修正结构，这可能导致元素嵌套混乱，直接影响层级渲染。
2. 堆叠上下文干扰：父容器.triOption设置了transform: rotate(180deg)，这会创建一个独立的堆叠上下文，子元素的z-index只会在这个上下文里生效。而且你给三角形元素设了z-index: -11，这会让它们跑到父容器的背景层下方，即使.footerdiv设了正的z-index，也可能因为定位/变换的问题没显示在正确位置。

解决方案步骤 #

1. 修正HTML结构

先把未闭合的<a>标签补上，确保结构正确：

<div class='triOption'>
  <a href='http://localhost/wordpress/2018/05/07/hey-baby-hey-baby-hey/#comment-2' class='tr'></a>
  <a href='http://localhost/wordpress/2018/05/07/morehousemusic/#comment-4' class='tr2'></a>
  <a href='http://localhost/wordpress/2018/05/07/hey-right-back/#comment-3' class='tr3'></a>
  <div class="footerdiv"></div>
</div>

2. 调整CSS层级与定位

修改CSS，调整堆叠层级和元素定位，确保.footerdiv能覆盖在.tr2上方：

.triOption {
  overflow: hidden;
  position: relative;
  width: 40em;
  height: 27em;
  transform: rotate(180deg);
}

.tr, .tr2, .tr3 {
  width:40%;
  padding-bottom:28.2842712474619%;
  position:absolute;
  overflow:hidden;
  z-index: 1; /* 改为正数，确保在父容器上下文内可见 */
}

.tr{
  transform-origin:0 100%;
  transform: rotate(45deg);
}
.tr:before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-image: url('https://earthjustice.org/sites/default/files/styles/image_800x600/public/mexican-gray-wolf_don-burkett-800.jpg?itok=LadqU1Ws');
  background-size: cover;
  background-position: center top;
  transform-origin:0 100%;
  transform: rotate(-45deg);
}

.tr2{
  transform-origin:0% 100%;
  transform: rotate(360deg);
}
.tr2:before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-image: url('https://static.wixstatic.com/media/0f91d3_403873a7f0764e64962d334fba013197~mv2_d_5184_3456_s_4_2.jpg/v1/fill/w_449,h_412,al_c,q_80,usm_0.66_1.00_0.01/0f91d3_403873a7f0764e64962d334fba013197~mv2_d_5184_3456_s_4_2.jpg');
  background-size: cover;
  background-position: center top;
  transform-origin:0 100%;
  transform: rotate(-45deg);
}

.tr3{
  transform-origin: 100% 100%;
  transform: rotate(45deg);
}
.tr3:before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-image: url('http://cdn.akc.org/content/article-body-image/housetrain_adult_dog_hero.jpg');
  background-size: cover;
  background-position: center top;
  transform-origin:100% 100%;
  transform: rotate(-45deg);
}

.footerdiv{
  background-image: url('https://earthjustice.org/sites/default/files/styles/image_800x600/public/mexican-gray-wolf_don-burkett-800.jpg?itok=LadqU1Ws');
  top: 0;
  left: 0;
  position:absolute;
  width:100%;
  height:100%;
  transform-origin:39.8% 135.2%;
  transform: rotate(-45deg);
  z-index: 2; /* 设为比三角形元素更高的层级 */
}

关键说明 #

• 把三角形元素的z-index改为1，避免它们跑到父容器背景下方，确保在同一堆叠上下文内和.footerdiv形成层级对比。
• .footerdiv的z-index设为2，高于三角形元素，这样就能覆盖在.tr2上方了。
• 如果你发现.footerdiv的位置还是不对，可以先暂时注释掉transform相关属性，先确认层级生效后，再调整旋转和定位参数。

内容的提问来源于stack exchange，提问作者David Black