您需要了解两件重要的事情：绘制顺序和堆叠上下文。如果您参考规范，则可以找到绘制元素的方式和时间。
堆叠由具有负z索引（不包括0）的后代按z索引顺序（最负的优先）然后按树顺序形成的上下文。
按树顺序排列的所有已定位，不透明或转换后代均属于以下类别：
所有以“ z-index：auto”或“ z-index：0”排列的后代，按树顺序排列。
堆叠上下文，这些上下文由定位的后代（z索引大于或等于1）按z索引顺序（最小的顺序为小）和树顺序形成。
显然，我们首先在步骤（3）绘制具有负z索引的元素，然后在步骤（8）绘制z索引等于0的元素，最后在步骤（9）绘制具有正z索引的元素。 ，这是合乎逻辑的。我们还可以阅读规范的另一部分：
每个盒子都属于一个堆叠上下文。给定堆叠上下文中的每个盒子都有一个整数堆叠级别，这是它在z轴上相对于同一堆叠上下文中其他盒子的位置。具有较高堆栈级别的框始终在具有较低堆栈级别的框前面格式化。盒子的堆叠高度可能为负。在堆叠上下文中具有相同堆叠级别的框将根据文档树顺序从下至上堆叠。
还
建立本地堆栈上下文的元素会生成一个具有两个堆栈级别的框：一个用于它创建的堆栈上下文（始终为0），一个用于它所属的堆栈上下文（由z-index属性赋予）。
要了解何时绘制每个元素，您需要了解其堆叠上下文以及该堆叠上下文中的堆叠级别（由z-index定义）。您还需要知道该元素是否建立了堆栈上下文。这是棘手的部分，因为设置z-index可以做到这一点：
对于定位框，z-index属性指定：
当前堆栈上下文中框的堆栈级别。
盒子是否建立堆叠环境
值具有以下含义：
<整数>
该整数是当前堆栈上下文中生成的框的堆栈级别。该框还建立了一个新的堆栈上下文。
汽车
当前堆栈上下文中生成的框的堆栈级别为0。除非框是根元素，否则框不会建立新的堆栈上下文。
现在，我们拥有所有信息，可以更好地理解每种情况。如果父元素的z-index值不是auto，则它将创建一个堆栈上下文，因此子元素将在其z-index为负（正或负）的任何内部绘画。子元素的z-index会简单地告诉我们父元素内部的绘画顺序（这涵盖了您的第二点）。
现在，如果仅子元素具有正的z索引，而我们在父元素上未设置任何内容，则考虑绘画顺序，子元素将在稍后（步骤（9））绘画，父元素在步骤（8）中绘画。在上面绘制父对象的唯一逻辑方法是增加z-index，但是这样做会使我们陷入前一种情况，即父对象将建立一个堆栈上下文，而子元素将属于该上下文。
为子级设置正z-index时，无法将父级置于子级元素上方。如果将z-index设置为不同于auto的父元素（正数或负数），也无法使父项位于子项之上。1
我们唯一可以在其父项之下有一个子项的情况是在子元素上设置一个负的z-index并将父项保持在z-index：auto上，因此，该子项将不会创建堆叠上下文并按照绘制顺序进行绘制孩子将首先被绘画。
除了z-index外，还有其他一些属性可以创建堆栈上下文。如果遇到预期的堆叠顺序，则还需要考虑这些属性，以查看是否创建了堆叠上下文。
我们可以从以上总结得出一些重要事实：
堆栈上下文可以包含在其他堆栈上下文中，并一起创建堆栈上下文的层次结构。
每个堆栈上下文完全独立于其同级：处理堆栈时仅考虑后代元素。
每个堆叠上下文都是独立的：在元素的内容堆叠之后，将按照父堆叠上下文的堆叠顺序考虑整个元素。参考
1：如果我们考虑使用3D变换，则有一些骇人听闻的方法。
元素位于其父元素下的示例，即使该元素指定了z-index。
。盒子 {
位置：相对；
z-index：0;
高度：80像素；
背景：蓝色；
转换样式：reserve-3d; /* 这个很重要 */
}
.box> div {
边距：0 50px;
高度：100px;
背景：红色；
z索引：-1； / *这将无济于事* /
transform：translateZ（-1px）; / *这会神奇* /
}

 

另一个示例，我们可以在另一个堆叠上下文中将一个元素放置在两个元素之间：
。盒子 {
职位：相对
z索引：0；
高度：80px；
背景：蓝色；
}
.box> div {
边距：0 50px;
高度：100px；
背景：红色；
z索引：5；
转换：translateZ（2px）;
}
。外部 {
高度：50px；
背景：绿色；
边距：-10px 40px;
转换：translateZ（1px）;
}
身体 {
转换样式：reserve-3d;
}

 

 
我们还可以有一些疯狂的堆叠顺序，如下所示：
。盒子 {
宽度：100px；
高度：100px；
位置：绝对；
}
身体 {
转换样式：reserve-3d;
}
 
 
 
 
我们应该注意，由于变换样式，透视图和变换会影响position：absolute / fixed元素，因此使用此类技巧可能会产生一些副作用。相关：父母身上的CSS过滤器破坏了孩子的位置
10
|
考虑这一点的一种好方法是每个父级都包含自己的堆栈上下文。同级元素共享父级的堆叠顺序，因此可能彼此重叠。
子元素总是基于其父元素获取堆栈上下文。因此，需要一个负的z-index值来将子级推到其父级（0）堆栈上下文的“后面”。
从元素的父级上下文中删除元素的唯一方法是使用position：fixed，因为这实际上迫使其将窗口用于上下文。
1个
|
Mozilla文档确实说
z-index CSS属性设置定位元素及其后代或flex项目的z顺序。
这是另一个StackOverflow文章中有关子代与后代的一些附加逻辑。
2个
|
如何通过逻辑理解这种行为？
对我来说，很难用逻辑来理解你的问题。父母包含其子女。一个碗可以被另一个碗盖住。但是，除非将汤从碗中取出，否则不能用碗盖住汤。
z-Index设置重叠元素的顺序。父母不能与孩子重叠。
ImhO完全合乎逻辑。
|
你的答案
StackExchange.ifUsing（“ editor”，function（）{
StackExchange.using（“ externalEditor”，function（）{
StackExchange.using（“ snippets”，function（）{
StackExchange.snippets.init（）;
}）;
}）;
}，“代码段”）；
StackExchange.ready（function（）{
var channelOptions = {
标签：“” .split（“”），
id：“ 1”
};
initTagRenderer（“”。split（“”），“” .split（“”），channelOptions）;
StackExchange.using（“ externalEditor”，function（）{
//如果启用了摘要，则必须在摘要后触发编辑器
如果（StackExchange.settings.snippets.snippetsEnabled）{
StackExchange.using（“ snippets”，function（）{
createEditor（）;
}）;
}
别的 {
createEditor（）;
}
}）;
函数createEditor（）{
StackExchange.prepareEditor（{
useStacksEditor：否，
heartbeatType：“答案”，
autoActivateHeartbeat：否，
convertImagesToLinks：是，
noModals：是的，
showLowRepImageUploadWarning：是的，
声望：ToPostImages：10，
bindNavPrevention：正确，
后缀：“”，
imageUploader：{
brandingHtml：“采用\ u003ca href = \“ https：//imgur.com/ \” \ u003e \ u003csvg class = \“ svg-icon \” width = \“ 50 \” height = \“ 18 \” viewBox = \“ 0 0 50 18 \” fill = \“ none \” xmlns = \“ http：//www.w3.org/2000/svg \” \ u003e \ u003cpath d = \“ M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.7256 4.91628 46.0943 5.50789C45.74.6 4.313.6412 4.313.6662 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \“ / \ u003e \ u003cpath d = \” M32.492 10.1419C32.492 12.6954 34.1182 14.048437.0451 14.0484 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \“ / \ u003e \ u003cpath fill-rule = \” evenodd \“ clip-rule = \” evenodd \“ d = \“ M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C6.72.3 4.56087 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.779928.121 12.8346C28.1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.5218 22.5437 14.5218C21.7977 14.5218 21.2429 15.0123633 ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.27932Z \“ / \ u003d \ u003c。 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.65844.662 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.8962C13.4375 13.8962 13.9157 13.25353.935.73.91 11.79121.979 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \“ / \ u003e \ u003cpath d = \” M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.59049V11.935C0.3917354 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \“ / \ u003e \ u003cpath d = \” M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3.524 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \“ fill = \”＃1BB76E \“ / \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e”，
contentPolicyHtml：“根据\ u003ca href = \“ https：//stackoverflow.com/help/licensing \” \ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \“ https://stackoverflow.com获得许可的用户贡献/ legal / content-policy \“ \ u003e（内容策略）\ u003c / a \ u003e”，
allowUrls：是
}，
onDemand：是的，
dispatchSelector：“。discard-answer”。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
，立即ShowMarkdownHelp：true，enableTables：true，enableSnippets：true
}）;
}
}）;
感谢您为Stack Overflow提供答案！
请务必回答问题。提供详细信息并分享您的研究！
但是要避免...
寻求帮助，澄清或回答其他答案。
根据意见发表声明；用参考或个人经验来备份它们。
要了解更多信息，请参阅我们撰写出色答案的提示。
草稿已保存
草稿丢弃
注册或登录
StackExchange.ready（function（）{
StackExchange.helpers.onClickDraftSave（'＃login-link'）;
}）;
使用Google注册
使用Facebook注册
使用电子邮件和密码注册
提交
以访客身份发布
姓名
电子邮件
必需，但从未显示
StackExchange.ready（
功能 （） {
StackExchange.openid.initPostLogin（'。new-post-login'，'https％3a％2f％2fstackoverflow.com％2fquestions％2f54897916％2fwhy-cant-an-element-with-az-index-value-cover-its- child％23new-answer'，'question_page'）;
}
）;
以访客身份发布
姓名
电子邮件
必需，但从未显示
发表您的答案
丢弃
点击“发布答案”，即表示您同意我们的服务条款，隐私政策和Cookie政策
不是您要找的答案？浏览标记为css css-position z-index的其他问题或提出您自己的问题。