我只想在按下alone-box toggle animation
按钮之前保持z-index顺序。
jsfiddle
function toggle_class() {if(document.getElementById('alone-boxes-wrapper').className == 'animated') document.getElementById('alone-boxes-wrapper').classList.remove('animated'); else document.getElementById('alone-boxes-wrapper').classList.add('animated');}

div.alone-box {
position:absolute;
z-index: 1;
height: 100px;
width:100px;
background-color: #F4F1DE;
opacity:0.9;
border:1px dashed #000;
}
div.absolute-wrapper {
position:absolute;
top:20px;
}
div.wrapper {
position:relative;
height: 100px;
width:100px;
left: 50px;
}
div.wrapper .box-1 {
position:absolute;
z-index:0;
}
div.wrapper .box-2 {
position:absolute;
top: 20px;
z-index:2;
}
@keyframes animation {
from { transform: translateX(1rem); }
to { transform: translateX(-1rem); }
}
div.wrapper.animated .box-1 {
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#alone-boxes-wrapper.animated {
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}

<div id="alone-boxes-wrapper">
<div class="alone-box"></div> <!-- z-index: 1 -->
</div>
<div class="absolute-wrapper">
<div class="wrapper animated">
<div class="box-1">1111111111</div> <!-- z-index: 0 -->
<div class="box-2">222222222</div> <!-- z-index: 2 -->
</div>
</div>
<button type="button" style="position:absolute;top:120px" onClick="toggle_class()">alone-box toggle animation</button>
&#13;
答案 0 :(得分:2)
transform
的行为类似于position:relative
(如果未设置位置),因此z-index
默认值为 0 ,并且子框位于此新堆叠之后上下文。
儿童盒子确实是z-index:1
,但在父母z-index:0
内。由于它是先绘制的,因此将在其上绘制在同一级别上绘制的下一个框。
静态,相对,变换和z-index的示例:http://codepen.io/anon/pen/AXkzOB
您需要在指定班级#alone-boxes-wrapper.animated
function toggle_class() {if(document.getElementById('alone-boxes-wrapper').className == 'animated') document.getElementById('alone-boxes-wrapper').classList.remove('animated'); else document.getElementById('alone-boxes-wrapper').classList.add('animated');}
div.alone-box {
position:absolute;
z-index: 1;
height: 100px;
width:100px;
background-color: #F4F1DE;
opacity:0.9;
border:1px dashed #000;
}
div.absolute-wrapper {
position:absolute;
top:20px;
}
div.wrapper {
position:relative;
height: 100px;
width:100px;
left: 50px;
}
div.wrapper .box-1 {
position:absolute;
z-index:0;
}
div.wrapper .box-2 {
position:absolute;
top: 20px;
z-index:2;
}
@keyframes animation {
from { transform: translateX(1rem); }
to { transform: translateX(-1rem); }
}
div.wrapper.animated .box-1 {
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#alone-boxes-wrapper.animated {
z-index: 1;/* here */
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
<div id="alone-boxes-wrapper">
<div class="alone-box"></div> <!-- z-index: 1 -->
</div>
<div class="absolute-wrapper">
<div class="wrapper animated">
<div class="box-1">1111111111</div> <!-- z-index: 0 -->
<div class="box-2">222222222</div> <!-- z-index: 2 -->
</div>
</div>
<button type="button" style="position:absolute;top:120px" onClick="toggle_class()">alone-box toggle animation</button>
或ID #alone-boxes-wrapper
function toggle_class() {if(document.getElementById('alone-boxes-wrapper').className == 'animated') document.getElementById('alone-boxes-wrapper').classList.remove('animated'); else document.getElementById('alone-boxes-wrapper').classList.add('animated');}
div.alone-box {
position:absolute;
z-index: 1;
height: 100px;
width:100px;
background-color: #F4F1DE;
opacity:0.9;
border:1px dashed #000;
}
div.absolute-wrapper {
position:absolute;
top:20px;
}
div.wrapper {
position:relative;
height: 100px;
width:100px;
left: 50px;
}
div.wrapper .box-1 {
position:absolute;
z-index:0;
}
div.wrapper .box-2 {
position:absolute;
top: 20px;
z-index:2;
}
@keyframes animation {
from { transform: translateX(1rem); }
to { transform: translateX(-1rem); }
}
div.wrapper.animated .box-1 {
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#alone-boxes-wrapper.animated {
animation-name: animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#alone-boxes-wrapper {
z-index: 1;/* here */
}
<div id="alone-boxes-wrapper">
<div class="alone-box"></div> <!-- z-index: 1 -->
</div>
<div class="absolute-wrapper">
<div class="wrapper animated">
<div class="box-1">1111111111</div> <!-- z-index: 0 -->
<div class="box-2">222222222</div> <!-- z-index: 2 -->
</div>
</div>
<button type="button" style="position:absolute;top:120px" onClick="toggle_class()">alone-box toggle animation</button>
此处有更多信息:http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892(来自@seahorsepip)