Question

这可能很容易，但我在按照我需要的方式工作时遇到了问题。

我使用bootstrap，下面是我的css和div结构。我隐藏了3个div，还有3个按钮让它们可见。我的问题是如何使div处于同一级别？目前，3个div是一个低于另一个。

为了更好地理解，我创建了Fiddle。

<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属性只是隐藏/显示保留此元素空间的元素。如果要在元素不可见时删除元素的空间，则应使用带有块/无值的display属性。

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

Answer 2

根据我的理解，您需要的其中一个可能性是，不仅可以让它们隐身，而且可以通过将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的元素仍会占用页面空间，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可以正常工作

在div中重叠div

3 个答案: