div内的div重叠

Question

这可能很容易，但是我无法按我需要的方式工作。

我正在使用引导程序，下面是我的css和div结构。 我隐藏了3个div和3个使其可见的按钮。 我的问题是如何使div处于同一级别？ 目前，这3个div彼此之间是一个div。

为了更好的理解，我创建了一个小提琴 。

<div class="row">
   <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 wrapper">
     <div class="groupHolder">
          <div id="xx" class="overlapDiv" Style="background-color:#F00;">Fruits</div> // need these overlaping
          <div id="yy" class="overlapDiv" Style="background-color:#888;">Flowers</div> // need these overlaping
          <div id="zz" class="overlapDiv" Style="background-color:#f60;">Veggies</div> // need these overlaping
     </div>
    <div class="buttonHolder">
        <button type="button" id="aa" class="standardBtn">Btn 1</button>
        <button type="button" id="bb" class="standardBtn">Btn 2</button>
        <button type="button" id="cc" class="standardBtn">Btn 3</button>
     </div>
   </div>
 </div>

Answer 1

CSS visibility属性只是隐藏/显示元素，保留该元素的空间。 如果要在元素不可见时删除其空间，则应使用具有block / none值的display属性。

像这样： https : //jsfiddle.net/6Lf9spha/3/

Answer 2

据我了解，您需要的一种可能性是不仅使它们不可见，而且通过更改visibility: hidden将它们完全visibility: hidden display: none

$("#aa").click(function(){
   $('.overlapDiv').css('display', 'none');
   $('#xx').css('display', 'block');
});


overlapDiv{
    display: block;
}
/* Make all elements except the first one hidden by default */
.overlapDiv:nth-child(n+2){
    display: none;
}

可见性会影响元素是否可见，但不会改变其布局播放。 例如 具有visibility: hidden元素visibility: hidden仍将在页面上占据空间， display: none 。

 $("#aa").click(function(){ $('.overlapDiv').css('display', 'none'); $('#xx').css('display', 'block'); }); $("#bb").click(function(){ $('.overlapDiv').css('display', 'none'); $('#yy').css('display', 'block'); }); $("#cc").click(function(){ $('.overlapDiv').css('display', 'none'); $('#zz').css('display', 'block'); }); 

 .wrapper{ margin-top: 25px; position: relative; text-align: center; } .buttonHolder{ position: relative; } .groupHolder{ overflow: hidden; position: relative; } .overlapDiv{ display: block; } .overlapDiv:nth-child(n+2){ display: none; } .standardBtn{ display: inline-block; cursor: pointer; padding: 12px 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 wrapper"> <div class="groupHolder"> <div id="xx" class="overlapDiv" Style="background-color:#F00;">Fruits</div> <div id="yy" class="overlapDiv" Style="background-color:#888;">Flowers</div> <div id="zz" class="overlapDiv" Style="background-color:#f60;">Veggies</div> </div> <div class="buttonHolder"> <button type="button" id="aa" class="standardBtn">Btn 1</button> <button type="button" id="bb" class="standardBtn">Btn 2</button> <button type="button" id="cc" class="standardBtn">Btn 3</button> </div> </div> </div> 

Answer 3

用这个

.overlapDiv {display: inline-block;}

Z-index也可以工作