不要指定任何内容
z-index以
.bank避免创建新的堆栈上下文,而只需调整
z-index其他元素的即可。这将起作用,因为所有3个元素都属于同一堆叠上下文,因此您可以指定所需的任何顺序。
.bank { position:relative; background: red; width: 500px; height: 200px;}.card { position: absolute; top:0; z-index: 2; height: 100px; width: 400px; background: blue;}.button { position: absolute; top: 0; z-index: 1; height: 150px; width: 450px; background: yellow;}.container { position: relative;}<div > <div > <div ></div> </div> <div ></div></div>更新
考虑到您的代码,唯一的方法是从中删除
z-indexand
transform,
.bank否则将是不可能的,因为您的元素永远不会属于同一堆栈上下文。如您在上一个链接中所读:
每个堆叠上下文都是 独立的 :将元素的内容堆叠之后,将按照父堆叠上下文的堆叠顺序 考虑整个元素 。



