这似乎是一个老问题，有一个众所周知的解决方案。也许这证明了我搜索引擎技能的贫乏或搜索引擎的粗糙，但我似乎在网上找不到解决方案。
你可以看看我的简化设置是你运行的代码片段。我有两个潜水器(浅蓝色(，一个在另一个上面。每个都有一个自定义下拉菜单小部件(黄色(，通过单击V形(粉红色/鲑鱼色(激活。但是，当我激活顶部项目的菜单时，无论我如何处理z索引，底部项目的V形符都会出现在菜单的前面。如何使V形出现在下拉菜单的后面？换句话说，如何使菜单显示在父div的前面，包括它们的V形前面？
如果我在V形div上放一个z索引，什么都不会改变。如果我去掉.baseItem .action或菜单上的z索引，菜单会在蓝色父div后面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Z-index stacking experiment</title>
<style type="text/css">
li.baseItem {
display: block;
position: relative;
margin: 5px;
padding: 0.5em;
border: 1px solid #888;
background-color: #cce;
}
.baseItem .action {
position: absolute;
top: 50%;
right: 5px;
z-index: 1;
transform: translateY(-50%);
}
.chevron {
background-color: #f88;
}
.chevron:before {
content: '^';
}
ul.ui-menu {
position: absolute;
top: 0.5em;
right: 0;
z-index: 10;
white-space: nowrap;
font-style: normal;
font-weight: normal;
border: 1px solid #61605e;
background-color: #ff0;
}
</style>
</head>
<body>
<ul>
<li class="baseItem">
<div>Parent 1, line 1</div>
<div>Parent 1, line 2</div>
<div class="right action">
<span class="chevron"></span>
<ul class="ui-menu" style="display: block;">
<li><div><span>Edit</span></div></li>
<li><div><span>Duplicate</span></div></li>
<li><div><span>Delete</span></div></li>
</ul>
</div>
</li>
<li class="baseItem">
<div>Parent 2, line 1</div>
<div>Parent 2, line 2</div>
<div class="right action">
<span class="chevron"></span>
<ul class="ui-menu" style="display: none;">
<li><div><span>Edit</span></div></li>
<li><div><span>Duplicate</span></div></li>
<li><div><span>Delete</span></div></li>
</ul>
</div>
</li>
</ul>
</body>
</html>您的问题是.action已经完全定位，因此z-index将重新排序元素中的子级。你需要摆脱CCD_ 4上的绝对定位；平躺"；具有其父div，并且不会出现在菜单上方。
所以你需要一个在.action上去掉position: absolute的设计。作为一个例子，我使用了grid:
.baseItem {
display: grid;
grid-template-columns: 1fr auto;
position: relative;
margin: 5px;
padding: 0.5em;
border: 1px solid #888;
background-color: #cce;
}
.action {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
position: relative;
}
.action::before {
content: '^';
background-color: #f88;
}
.ui-menu {
position: absolute;
top: 0.5em;
right: 0;
z-index: 10;
white-space: nowrap;
font-style: normal;
font-weight: normal;
border: 1px solid #61605e;
background-color: #ff0;
}<ul>
<li class="baseItem">
<div>Parent 1, line 1</div>
<div>Parent 1, line 2</div>
<div class="right action">
<ul class="ui-menu" style="display: block;">
<li>
<div><span>Edit</span></div>
</li>
<li>
<div><span>Duplicate</span></div>
</li>
<li>
<div><span>Delete</span></div>
</li>
</ul>
</div>
</li>
<li class="baseItem">
<div>Parent 2, line 1</div>
<div>Parent 2, line 2</div>
<div class="right action">
<ul class="ui-menu" style="display: none;">
<li>
<div><span>Edit</span></div>
</li>
<li>
<div><span>Duplicate</span></div>
</li>
<li>
<div><span>Delete</span></div>
</li>
</ul>
</div>
</li>
</ul>ul.ui-menu不需要绝对定位或具有z索引，因为父.baseItem .action已经是position: absolute
ul.ui-menu {
white-space: nowrap;
font-style: normal;
font-weight: normal;
border: 1px solid #61605e;
}
我不知道你在这里是如何处理菜单的打开和关闭的，但我建议在打开的.baseItem .action中添加z-index: 1。也许可以添加一个.active类。
(旁注：.baseItem .action上的transform: translateY(-50%)和top: 50%可能没有必要。请尝试top: 0。(
您可以使用transform:translateZ 调整Z平面中的位置
* {
transform-style: preserve-3d;
}
li.baseItem {
display: block;
position: relative;
margin: 5px;
padding: 0.5em;
border: 1px solid #888;
background-color: #cce;
}
.baseItem .action {
position: absolute;
top: 50%;
right: 5px;
z-index: 1;
transform: translateY(-50%);
}
.chevron {
background-color: #f88;
}
.chevron:before {
content: '^';
}
ul.ui-menu {
transform: translateZ(10px);
position: absolute;
top: 0.5em;
right: 0;
z-index: 10;
white-space: nowrap;
font-style: normal;
font-weight: normal;
border: 1px solid #61605e;
background-color: #ff0;
}<ul>
<li class="baseItem">
<div>Parent 1, line 1</div>
<div>Parent 1, line 2</div>
<div class="right action">
<span class="chevron"></span>
<ul class="ui-menu" style="display: block;">
<li>
<div><span>Edit</span></div>
</li>
<li>
<div><span>Duplicate</span></div>
</li>
<li>
<div><span>Delete</span></div>
</li>
</ul>
</div>
</li>
<li class="baseItem">
<div>Parent 2, line 1</div>
<div>Parent 2, line 2</div>
<div class="right action">
<span class="chevron"></span>
<ul class="ui-menu" style="display: none;">
<li>
<div><span>Edit</span></div>
</li>
<li>
<div><span>Duplicate</span></div>
</li>
<li>
<div><span>Delete</span></div>
</li>
</ul>
</div>
</li>
</ul>