在div中重叠div

时间:2015-05-07 17:43:12

标签: html css css3 twitter-bootstrap

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

我使用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>

3 个答案:

答案 0 :(得分:2)

CSS visibility属性只是隐藏/显示保留此元素空间的元素。如果要在元素不可见时删除元素的空间,则应使用带有块/无值的display属性。

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

答案 1 :(得分:1)

根据我的理解,您需要的其中一个可能性是,不仅可以让它们隐身,而且可以通过将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>

答案 2 :(得分:0)

使用此

.overlapDiv {display: inline-block;}

Z-index可以正常工作