如何修复翻转的div背面的bootstrap下拉z-index？

Question

I have multiple divs which can be flipped on hover via css transformation.
On each backside I have a bootstrap buttongroup with a dropdown button.
If I expand the dropdown-menu the list is hiding behind the next div.

How can I bring the list to the front?

http://www.bootply.com/3ugZnOsnY2

Answer 1

Just listen for bootstraps dropdown events and then adjust the elements z-index. Check the snippet, you should choose a bit more precise selectors than i did though.

 $('.flip').hover(function(){ $(this).find('.card').toggleClass('flipped'); }); $('.btn-group').on('show.bs.dropdown', function () { $(this).parentsUntil($( ".face", ".back")).css('zIndex', 200); }) $('.btn-group').on('hidden.bs.dropdown', function () { $(this).parentsUntil($( ".face", ".back")).css('zIndex', 0); }) 

 body{ padding-top:50px; background: #555; } .flip { -webkit-perspective: 800; perspective: 800; position: relative; text-align: center; } .flip .card.flipped { -webkit-transform: rotatey(-180deg); transform: rotatey(-180deg); } .flip .card { height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; transform-style: preserve-3d; transition: 0.5s; } .flip .card .face { -webkit-backface-visibility: hidden ; backface-visibility: hidden ; z-index: 2; } .flip .card .front { position: absolute; width: 100%; z-index: 1; } .flip .card .back { -webkit-transform: rotatey(-180deg); transform: rotatey(-180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="flip"> <div class="card"> <div class="face front"> <div class="well well-sm"> Front</div> </div> <div class="face back"> <div class="well well-sm"> Back <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link 1</a></li> <li><a href="#">Dropdown link 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="col-sm-12"> <div class="flip"> <div class="card"> <div class="face front"> <div class="well well-sm"> Front</div> </div> <div class="face back"> <div class="well well-sm"> Back <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link 1</a></li> <li><a href="#">Dropdown link 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> 

Have fun!