嵌套元素的CSS Z索引问题
我想在z平面上订购3个HTML元素：
.bank {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
z-index: 100;
transform: translateY(10%);
}
.card {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 300;
}
.button {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 30px;
top: 50px;
z-index: 200;
}
<div class="bank">
bank
<div class="card">card</div>
</div>
<div class="button">button</div>
我希望 按钮 在 银行的 上方，但在 卡的背面 。但是无论我尝试什么，该 按钮 始终位于 银行 和 卡上 。
编辑：我注意到从’.bank’中删除z-index和transform可以解决它，但是我需要transform属性。 我能做什么？
是什么导致它无法正常工作？谢谢
问题答案：
不要指定任何内容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 class="container">
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
</div>
更新
考虑到您的代码，唯一的方法是从中删除z-indexand
transform，.bank否则将是不可能的，因为您的元素永远不会属于同一堆栈上下文。如您在上一个链接中所读：
每个堆叠上下文都是 独立的 ：将元素的内容堆叠之后，将按照父堆叠上下文的堆叠顺序 考虑整个元素 。
-
问题内容： 我有一个：before开头的’quote’和一个：after结束的报价。 现在，我想要的是一个：after：after供“引用”参考，但我无法使其正常工作。 有人知道这是否可能吗？ 到目前为止，我的代码： 问题答案： 已经提出了嵌套和伪元素的想法；请参阅“生成和替换的内容”模块的这一部分。但是，该模块已被放弃，等待完全重写，因此在重新发布该文档之前，我不会屏息。即便如此，嵌套内容伪元素
-
问题内容： 我在bleow显示的代码中使用嵌套列表在Python中遇到了一些问题。 基本上，我有一个包含所有0值的2D列表，我想循环更新列表值。 但是，Python不会产生我想要的结果。我对range()Python列表索引有误解吗？ 我预期的结果是： 但是Python的实际结果是： 这里发生了什么？ 问题答案： 问题是由于python选择通过引用传递列表这一事实引起的。 通常，变量是按“值”传递
-
有人能帮忙填写上面的评论部分吗？或者是否有其他选项来映射这些对象？ 编辑：我尝试了下面的解决方案，但是接口实现类本身发生了变化。
-
问题内容： 我正在使用selenium，并且正在使用功能FindElements，所以我正在获取实现IReadOnlyCollection接口的元素。我想遍历列表，但似乎IReadOnlyCollection没有诸如Get（int index）或操作[]的实现之类的任何方法。 我想避免将结果转换为List或数组，因为我只想访问元素以读取它们。 目前，我不想使用foreach，因为我需要管理索引，以
-
在嵌套字段中读取MongoDB更新数据后，我使用 我如何访问那个元素？(只是子元素而不是整个文档)< br >例如< code > db . users . findone({ _ id:' 123 ' }，{ ' $ elem ':" friends . 0 . emails . 0 . email " })； 例如:< br >如果它是一个JavaScript对象，它将是< br> 如果是Py
-
问题内容： 我正在尝试通过其索引访问dict_key的元素： 我想得到。 与： 我怎样才能做到这一点？ 问题答案： 而是调用字典： 在Python 3中，该方法返回一个字典视图对象，它充当一个集合。直接遍历字典还会产生键，因此将字典转换为列表会得到所有键的列表：