我遇到了一个问题,我想知道你们是否可以帮助我解决这个问题。
如代码片段所示,我有一些元素
transform: translate(0,0);
然后,在它们内部,我有一个“下拉”元素,当您单击按钮时会显示该元素。
当这个下拉列表的一部分隐藏在其他元素后面时,问题就来了,我发现这是因为它的父元素有这个转换属性。
我的代码有更多的东西,代码片段只是一个例子。我无法摆脱转换属性。
我想知道是否有任何解决方案。我正在尝试仅使用 CSS 来解决它。
干杯!
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0);
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
</ul>
最佳答案
不幸的是,可能没有纯 CSS 解决方案 - CSS3 转换创建了一个新的堆栈上下文 - 请参阅相关文档描述和 this thread
另一种效果:
If the property has a value different than none, a stacking context will be created.
Source: MDN
您可以轻松地将 translate(0,0)
替换为 position: relative
并添加一个大于零的 z-index
到 .template-options-dropdown
解决问题。
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
/*transform: translate(0, 0);*/
position: relative; /*ADDED*/
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
z-index: 2;/*ADDED*/
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
</ul>
一个 hacky 解决方案,它弄乱了包装 - 您可以添加更多转换:
为
ul
添加scaleY(-1)
使列表向后排列,因为具有较高索引的列表项位于第一个列表项之上指数较低。向
li
添加一个反转scaleY(-1)
使世界恢复正常。同时清除
li
float 。
请看下面的演示:
$(document).ready(function() {
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
transform: scaleY(-1);/*ADDED*/
}
.boxes:after {/*ADDED*/
content: '';
clear: both;
display: block;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0) scaleY(-1);/*ADDED*/
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
</ul>
如果 translate(0,0)
仍然无法删除,您别无选择,只能使用 javascript:
通过给定一个等于列表中索引的
z-index
来反转列表堆叠。将
position:relative
添加到li
请看下面的演示:
$(document).ready(function() {
// ADDED
$($('ul.boxes > li').get().reverse()).each(function(index){
$(this).css('z-index', index);
});
$('button[name="button"]').click(function(e) {
$(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
});
});
.boxes {
list-style-type: none;
}
.boxes >li {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
transform: translate(0, 0);
position: relative;/*ADDED*/
}
.download-container {
background: rgba(40, 39, 39, 0.8);
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
.download-container .dropdown-container {
display: inline-block;
position: relative;
}
.download-container .dropdown-container button {
background: #0bb9ab;
color: #fff;
padding: 6px 12px;
}
.template-options-dropdown {
list-style-type: none;
text-align: left;
padding: 0;
position: absolute;
background-color: #111;
visibility: hidden;
}
.template-options-dropdown.open {
visibility: visible;
}
.template-options-dropdown li a {
color: white;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
<li>
<div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div>
</li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
<li><div class="download-container">
<div class="dropdown-container">
<button type="button" name="button">Download</button>
<ul class="template-options-dropdown">
<li>
<a href="#">Original</a>
</li>
<li>
<a href="#">Thumb</a>
</li>
<li>
<a href="#">Mobile</a>
</li>
<li>
<a href="#">Tab</a>
</li>
<li>
<a href="#">Web</a>
</li>
<li>
<a href="#">Large web</a>
</li>
</ul>
</div>
</div></li>
</ul>
关于html - 具有 transform 属性的元素内的子元素 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46249594/