CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bekki
Bekki

Reputation: 729

Overlap divs within a div

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>

Upvotes: 0

Views: 96

Answers (3)

Criss Lion
Criss Lion

Reputation: 209

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>

Upvotes: 0

Yoann Augen
Yoann Augen

Reputation: 2036

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/

Upvotes: 1

user3814024
user3814024

Reputation:

Use this

.overlapDiv {display: inline-block;}

Z-index could work aswell

Upvotes: 0

Related Questions