我的目标是使用'transform'属性在元素内部渲染绝对定位的元素，该属性是带有溢出：隐藏元素的子元素。
我尝试了各种样式组合，但它们均无法按预期工作。请参见下面的标记。
这是原型：
<VirtualHost canicarry.thehatapps.com/*:80>
ServerName canicarry.thehatapps.com
ProxyRequests Off
ProxyPass / ajp://localhost:8086/SecondAmendmentSupporters-0.2
ProxyPassReverse / ajp://localhost:8086/SecondAmendmentSupporters-0.2
</VirtualHost>
HTML structure:
<div class="mega-menu">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>
E
<div class="dropdown"></div>
</li>
<li>F</li>
</ul>
</div>
</div>
</div>
</div>
CSS rules:
我的jsfiddle：https://jsfiddle.net/Faradzh/8y2oLdw9/21/。
如果有人可以在jsfiddle中提出可行的解决方案，那将很棒。
尽管其中一个祖先是.mega-menu {
background-color: #ffffff;
top: 50px;
width: 95%;
height: 55px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 1;
position: fixed;
left: 0;
right: 0;
max-width: 1300px;
margin: 0 auto;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1;
}
/* the element causing the issue */
.swiper-wrapper {
transform: translate3d(-5px, 0px, 0px);
}
li {
background-color: pink;
padding: 5px;
height: 55px;
width: 55px;
display: inline-block;
text-align: center;
}
.dropdown {
width: 100px;
height: 150px;
position: absolute;
background-color: blue;
}
且父辈是dropdown，但预期的行为transformed却是绝对呈现的