css - How to keep z-index order on multiple elements transform animation? -
i want keep z-index order before presing alone-box toggle animation button. 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 { { transform: translatex(1rem); } { 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>
transform acts position:relative (if no position set) , z-index default value comes 0 , child box follows new stacking context.
the child boxe indeed z-index:1 within parent @ z-index:0. since drawn first, next box drawn on same level drawn on it.
an example static, relative , transform , z-index : http://codepen.io/anon/pen/axkzob
you need set z-index on absolute boxe within assigned class #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 { { transform: translatex(1rem); } { 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>or once in 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 { { transform: translatex(1rem); } { 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>more info here : http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892 (shared @seahorsepip )
Comments
Post a Comment