css 如何击败具有最高z索引值的同级堆栈上下文

nbnkbykc 于 2023-03-25 发布在其他

关注(0)|答案(1)|浏览(92)

在下面的情况下，如何通过修改.green的CSS来确保.green出现在.blue之上？.blue具有2147483647的最高z索引值，并且无法更改。
我的理解是，这两个元素已经有了自己的堆栈上下文，因此像transform: scale(1)这样的诡计在这里不起作用。
有什么办法吗？

div {
  width: 200px;
  height: 100px;
}

.green {
  background: green;
  position: relative;
  z-index: 999;
}

.blue {
  background: blue;
  position: absolute;
  margin-top: -50px;
  margin-left: 50px;
  z-index: 2147483647; // maximum value
}

<div class="green">Must appear above</div>
<div class="blue">Cannot modify</div>

css

来源：https://stackoverflow.com/questions/75791397/how-to-beat-a-sibling-stacking-context-with-the-highest-z-index-value

1条答案

按热度按时间

knsnq2tg1#

3D变换可以做到这一点，但要注意变换的潜在副作用：

div {
  width: 200px;
  height: 100px;
}

.green {
  background: green;
  position: relative;
  z-index: 999;
  transform: translateZ(1px); /* 1px is enough */
}

.blue {
  background: blue;
  position: absolute;
  margin-top: -50px;
  margin-left: 50px;
  z-index: 2147483647; /* maximum value */
}

body {
  transform-style:preserve-3d; /* this is mandatory*/
}

<div class="green">Must appear above</div>
<div class="blue">Cannot modify</div>

赞(0）回复(0）举报 2023-03-25

我来回答

css 如何击败具有最高z索引值的同级堆栈上下文

1条答案

相关问题

热门标签

最新问答