Overlap divs within a div - html

Question

This might be quite easy but I'm having problems getting this to work the way I need.
I'm using bootstrap and below is my css and div structure. I'm having 3 divs hidden and 3 buttons to make them visible. My problem is how do I make the divs be in the same level? At the moment the 3 divs are one below the other.
For Better understanding I've created a 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 property just hide/show the element keeping the space of this element. If you want to remove the space of the element when it is invisible, you should use display property with block/none value.
like that :
https://jsfiddle.net/6Lf9spha/3/

Answer 2

Use this
.overlapDiv {display: inline-block;}
Z-index could work aswell

Answer 3

From what I understand you need, one of the possibilities is to not only make them invisible but hide them completely by changing visibility: hidden to 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 affects if the element is visible, but does not change its playe in layout. ex. Element with visibility: hidden will still take space on the page, display: none will not.
$("#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>