CSS翻译的父母的废隐藏孩子
我正在使用ngx-datatable。它使用transform: translate3d使用其高度来定位每一行。当我在内部放置一个下拉菜单并且其下面的元素隐藏了该下拉菜单的选项时，就会出现问题。如下图所示：
我的ngx-datatable配置：
<ngx-datatable #chemicalResistanceGrid class="table-striped"
[cssClasses]="..."
[rows]="..."
[count]="..."
[limit]="..."
[rowHeight]="68"
[headerHeight]="40"
[footerHeight]="40"
[scrollbarV]="true"
[scrollbarH]="true"
[columns]="gridColumns"
[rowClass]="getRowClass"
[columnMode]="'force'">
<!---->
</ngx-datatable>
这些示例是对我的问题的更简单的模拟：
如果我将行元素设置为带序列号的z-index，则子元素如下所示：
row 0 element: (z-index: 100)
row 1 element: (z-index: 99)
此解决方案不是一种选择。我希望获得与z-index方法相同的结果，理想的解决方案也需要使用 CSS 。这就是布局的外观。
谢谢。
这是整个仿真代码及其摘要：
ul {
background: #b6ff00;
border-radius: 0 0 10px 10px;
}
li {
list-style: none;
}
section.datatable-body {
width: 1252px;
height: 420px;
overflow-y: auto;
overflow-x: auto;
position: relative;
z-index: 10;
display: block;
box-sizing: border-box;
font-size: 13px;
line-height: 1.42857143;
color: #333;
}
section.datatable-selection {
box-sizing: border-box;
}
section.datatable-scroller {
height: 5576px;
width: 1650px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
box-sizing: border-box;
}
section.datatable-row-wrapper {
position: absolute;
background-color: #f9f9f9;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-sizing: border-box;
white-space: nowrap;
font-size: 13px;
line-height: 1.42857143;
color: #333;
box-sizing: border-box;
}
section.datatable-body-row {
height: 68px;
width: 1650px;
white-space: nowrap;
outline: none;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
box-sizing: border-box;
direction: ltr;
}
section.datatable-row-center {
width: 1650px;
display: flex;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-flow: row;
box-sizing: border-box;
white-space: nowrap;
}
section.datatable-body-cell {
width: 150px;
min-width: 200px;
max-width: 600px;
height: 68px;
/**/
white-space: nowrap;
text-overflow: ellipsis;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
vertical-align: top;
display: inline-block;
line-height: 1.625;
text-align: left;
padding: .8rem 1.2rem .5rem;
transition: width .3s ease;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
box-sizing: border-box;
-webkit-box-direction: normal;
}
section.datatable-body-cell-label {
box-sizing: border-box;
white-space: nowrap;
display: block;
line-height: 1.625;
text-align: left;
-webkit-box-direction: normal;
}
section.form-horizontal {
box-sizing: border-box;
margin: 0;
outline: 0;
color: #666;
position: relative;
display: block;
line-height: 1.625;
white-space: nowrap;
text-align: left;
-webkit-box-direction: normal;
}
section.ngx-select {
-webkit-border-radius: 0 !important;
-webkit-box-shadow: none !important;
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 32px;
box-sizing: border-box;
border: 1px solid #ccc;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
section.ngx-select-dropdown {
box-sizing: border-box;
margin: 0;
padding: 0;
display: block !important;
position: relative;
text-align: left;
}
section.ul {
width: 100%;
height: auto;
max-height: 200px;
overflow-x: hidden;
margin-top: 0;
position: absolute;
border: 1px solid red;
border-radius: 4px 4px;
bottom: 5px;
animation-name: flipInX;
animation-fill-mode: both;
box-sizing: border-box;
margin: 0;
padding: 0;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
list-style: none;
font-size: 13px;
text-align: left;
}
.li {
box-sizing: border-box;
margin: 0;
padding: 0;
display: list-item;
text-align: -webkit-match-parent;
border: 1px solid red;
}<html>
<head>
</head>
<body>
<section class="datatable-body">
<section class="datatable-selection">
<section class="datatable-scroller">
<section class="datatable-row-wrapper" style="transform: translate3d(0px, 0px, 0px);backface-visibility: hidden;">
<section class="datatable-body-row">
<section class="datatable-row-center">
<section class="datatable-body-cell">
<section class="datatable-body-cell-label">
<section class="form-horizontal">
<section class="ngx-select">
<section class="ngx-select-dropdown">
<ul id="ul">
<li class="li">Test 1</li>
<li class="li">Test 2</li>
<li class="li">Test 3</li>
<li class="li">Test 4</li>
<li class="li">Test 5</li>
<li class="li">Test 6</li>
<li class="li">Test 7</li>
<li class="li">Test 8</li>
<li class="li">Test 9</li>
<li class="li">Test 0</li>
</ul>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
<section class="datatable-row-wrapper" style="transform: translate3d(0px, 68px, 0px);backface-visibility: hidden;">
<section class="datatable-body-row">
<section class="datatable-row-center">
<section class="datatable-body-cell">
<section class="datatable-body-cell-label">
<section class="form-horizontal">
<section class="ngx-select">
<section class="ngx-select-dropdown">
<ul id="ul">
<li class="li">Test 1</li>
<li class="li">Test 2</li>
<li class="li">Test 3</li>
<li class="li">Test 4</li>
<li class="li">Test 5</li>
<li class="li">Test 6</li>
<li class="li">Test 7</li>
<li class="li">Test 8</li>
<li class="li">Test 9</li>
<li class="li">Test 0</li>
</ul>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
<section class="datatable-row-wrapper" style="transform: translate3d(0px, 136px, 0px);backface-visibility: hidden;">
<section class="datatable-body-row">
<section class="datatable-row-center">
<section class="datatable-body-cell">
<section class="datatable-body-cell-label">
<section class="form-horizontal">
<section class="ngx-select">
<section class="ngx-select-dropdown">
<ul id="ul">
<li class="li">Test 1</li>
<li class="li">Test 2</li>
<li class="li">Test 3</li>
<li class="li">Test 4</li>
<li class="li">Test 5</li>
<li class="li">Test 6</li>
<li class="li">Test 7</li>
<li class="li">Test 8</li>
<li class="li">Test 9</li>
<li class="li">Test 0</li>
</ul>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
经过研究，我发现了问题所在。此处的关键是变换元素（transform：translate3d（0px，Xpx，0px））。 W3school中有一个注释，该注释强制将transform-style与转换一起使用。因此，无论我在哪里使用变换，都必须使用所需的变换样式机制；在这种情况下，preserve-3d表示已转换元素的子代将保持其自己的位置。我注意到的另一件事是z-index不适用于转换元素的子代。对我有用的是转换：translateZ（1px）。
所以： database-scroller->添加了转换样式：preserve-3d datatable-row-wrapper->保持其变换：translate3d（0px，xxpx，0px） datatable-body-row.editMode（当它处于editMode时）->添加了转换：translateZ（1px）;
$(function () {
$('.toggle-dropdown').on('click', function () {
var drop = $(this).parents('.container').find('.element');
var row = $(this).parents('.container').find('.row');
$(row).toggleClass('editMode');
$(this).html($(row).hasClass('editMode') ? '↑' : '↓');
});
}); section.wrapper {
position: relative;
transform-style: preserve-3d;
}
section.container {
position: absolute;
transform-style: preserve-3d;
height: 40px;
width: 100%;
background-color: aliceblue;
z-index: 1000;
}
div.cell {
width: 200px;
padding: 10px;
vertical-align: top;
display: inline-block;
position: relative;
}
div.editMode {
transform: translateZ(10px);
}
ul.element {
background-color: beige;
list-style: none;
z-index: 1000;
margin: 0;
padding-left: 5px;
display: none;
transition: visibility 0s, opacity 0.5s linear;
}
.editMode ul.element {
display: block;
}
.icon {
padding: 2px 5px;
background-color: gray;
border: 1px solid gray;
border-radius: 5px;
cursor: pointer;
} <html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<section class="wrapper">
<section id="row1" class="container" style="transform:translate3d(0px, 0px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
<section id="row2" class="container" style="transform:translate3d(0px, 40px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
<section id="row3" class="container" style="transform:translate3d(0px, 80px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
<section id="row4" class="container" style="transform:translate3d(0px, 120px, 0px)">
<div class="row">
<div class="cell">
<input type="text" /><span class="toggle-dropdown icon">↓</span>
<ul class="element">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</div>
<div class="cell">
<input type="text" />
</div>
<div class="cell">
<input type="text" />
</div>
</div>
</section>
</section>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？