Make buttons in overlapping divs clickable

Question

I got two divs with buttons in each of them. The divs should be arranged in the most space-saving way as shown in the screenshot beneath:

But when I do so the Buttons "Warm" & "Hot" can't be clicked anymore (since the other div is overlaying.

What would be a good approach to solve this issue?

This is my html:

<div id="page1">
        <div id="formScales">
            <div class="formContent" id="noise">
                <p>Noise</p>
                <input type="button" id="nbtn1" value="Noisy" />
                <input type="button" id="nbtn2" value="Medium noisy" />
                <input class="active" type="button" id="nbtn3" value="Neutral" />
                <input type="button" id="nbtn4" value="Medium silent" />
                <input type="button" id="nbtn5" value="Silent" />       
            </div>

            <div class="formContent" id="lighting">
                <p>Lighting</p>
                <input type="button" id="lbtn1" value="Bright" />
                <input type="button" id="lbtn2" value="Medium bright" />
                <input class="active" type="button" id="lbtn3" value="Neutral" />
                <input type="button" id="lbtn4" value="Medium dark" />
                <input type="button" id="lbtn5" value="Dark" />       
            </div>

            <div class="formContent" id="temp">
                <p>Temperature</p>
                <input type="button" id="tbtn1" value="Cold" temp="test"/>
                <input type="button" id="tbtn2" value="Cool" />
                <input type="button" id="tbtn3" value="Slightly cool" />
                <input class="active" type="button" id="tbtn4" value="Neutral" />
                <input type="button" id="tbtn5" value="Slightly warm" />
                <input type="button" id="tbtn6" value="Warm" />     
                <input type="button" id="tbtn7" value="Hot" />     

            </div>
        </div>

        <div id="activity">
            <p>Activities</p>
            <input class="activityBtn" type="button" id="btn16" value="Reading" />
            <input class="activityBtn active" type="button" id="btn17" value="On Computer" />
            <input class="activityBtn" type="button" id="btn18" value="In Meeting" />
            <input class="activityBtn" type="button" id="btn19" value="Moving" />
            <input class="activityBtn" type="button" id="btn20" value="Other" />
        </div>

            <input type="submit" id="submitButton" value="Submit"/>
    </div>

And the CSS:

body {
    padding-top: 4px;
    background-color: #ececec;
    margin-top: 16px;
    margin-left: 0px;
    margin-right: 0px;

}

#page1 {
    height: 480px;
    width: 320px;
    display: inline;
}

#formScales {
    position: relative;
    /* otherwise the float of the child gets it out
         of the document flow */
    overflow:auto;
}

#activity {
    position: relative;
    overflow:auto;
    margin-top: -77px;
}

#skip {
    postion:relative;
    overflow: auto;
    margin-top: 7px;
}



#noise {
    float: left;
    width: 31vw;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
    background-color: rgba(255, 204, 204, 0.3);
}

#lighting {
    float: left;
    width: 31vw;
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 7px;
    background-color: rgba(255, 255, 153, 0.3);

}

#temp {
    float: left;
    width: 31vw;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 7px;
    background-color: rgba(255, 204, 153, 0.3);

}


p {
    font-family: Verdana, arial, sans-serif;    
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.activityBtn {
    float: left;
    height: 31vw;
    width: 31vw;
    margin-left: 5px;
}


.active {
    background-color: #99CCFF !important;
    border: 1px solid #606060;
}

#submitButton {
    float: left;
    height: 12vw;
    width: 300px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: transparent; 
    background-repeat: no-repeat;  
    background-position: 20px 10px;  
    vertical-align: middle; 
    /*line-height: 160px;   background-image: url(icons/photo74.png);*/
    background-color: #77DD77;

}

input {
    /* webkit-appearance:none to override standard button design! */
    -webkit-appearance: none;
    color: #3B444B;
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding: 8px 12px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    font-family: helvetica, arial, sans-serif;
    border-radius: 2px;
    border: 1px solid #606060;
    background-color: rgba(255,255,255, 0.8);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* css baseclass */
baseActivityBox, 
/* inherit from baseclass */
#btn16, 
#btn17, 
#btn18, 
#btn19, 
#btn20 {
    background-color: transparent; 
    background-repeat: no-repeat;  
    background-position: 20px 10px;  
    vertical-align: middle; 
    line-height: 160px;
}

#btn16 {
    background-image: url(icons/man216.png);
}
#btn17 {
    background-image: url(icons/work12.png);
}
#btn18 {
    background-image: url(icons/businessman.png);
    clear: left;
}
#btn19 {
    background-image: url(icons/business163.png);
}
#btn20 {
    background-image: url(icons/other.png);
}

#btn21 {
    width: 30vw;
    margin-left: 5px;
    background-color: #ED2939;
}
#btn22 {
    width: 65vw;
    background-color: #ED2939;

}

Answer 1

I tried making a Codepen with the code you gave but theres some points missing from it:(

Try this

#activity{
 position:relative;
 z-index:10;
}

and on your tempature div containing the buttons add

{
 position:relative;
 z-index:20;
}

edit Codepen http://codepen.io/noobskie/pen/JYdGvb

only code added is at the bottom which is:

#formScales{
  position:relative;
  z-index:20
}
#activity{
  position:relative;
  z-index:10
}

Answer 2

As mentioned by val in the comments, it is possible to disable pointer events for the parent, but maintain them for its children.

Just apply this code:

#activity {
  pointer-events:none;
}
#activity > * {
  pointer-events: all;
}

Here is the full example (based on the pen NooBskie created):

body {
    padding-top: 4px;
    background-color: #ececec;
    margin-top: 16px;
    margin-left: 0px;
    margin-right: 0px;

}

#page1 {
    height: 480px;
    width: 320px;
    display: inline;
}

#formScales {
    position: relative;
    /* otherwise the float of the child gets it out
         of the document flow */
    overflow:auto;
}

#activity {
    position: relative;
    overflow:auto;
    margin-top: -77px;
}

#skip {
    postion:relative;
    overflow: auto;
    margin-top: 7px;
}



#noise {
    float: left;
    width: 31vw;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
    background-color: rgba(255, 204, 204, 0.3);
}

#lighting {
    float: left;
    width: 31vw;
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 7px;
    background-color: rgba(255, 255, 153, 0.3);

}

#temp {
    float: left;
    width: 31vw;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 7px;
    background-color: rgba(255, 204, 153, 0.3);

}


p {
    font-family: Verdana, arial, sans-serif;    
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.activityBtn {
    float: left;
    height: 31vw;
    width: 31vw;
    margin-left: 5px;
}


.active {
    background-color: #99CCFF !important;
    border: 1px solid #606060;
}

#submitButton {
    float: left;
    height: 12vw;
    width: 300px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: transparent; 
    background-repeat: no-repeat;  
    background-position: 20px 10px;  
    vertical-align: middle; 
    /*line-height: 160px;   background-image: url(icons/photo74.png);*/
    background-color: #77DD77;

}

input {
    /* webkit-appearance:none to override standard button design! */
    -webkit-appearance: none;
    color: #3B444B;
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding: 8px 12px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    font-family: helvetica, arial, sans-serif;
    border-radius: 2px;
    border: 1px solid #606060;
    background-color: rgba(255,255,255, 0.8);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* css baseclass */
baseActivityBox, 
/* inherit from baseclass */
#btn16, 
#btn17, 
#btn18, 
#btn19, 
#btn20 {
    background-color: transparent; 
    background-repeat: no-repeat;  
    background-position: 20px 10px;  
    vertical-align: middle; 
    line-height: 160px;
}

#btn16 {
    background-image: url(icons/man216.png);
}
#btn17 {
    background-image: url(icons/work12.png);
}
#btn18 {
    background-image: url(icons/businessman.png);
    clear: left;
}
#btn19 {
    background-image: url(icons/business163.png);
}
#btn20 {
    background-image: url(icons/other.png);
}

#btn21 {
    width: 30vw;
    margin-left: 5px;
    background-color: #ED2939;
}
#btn22 {
    width: 65vw;
    background-color: #ED2939;

}




.formContent{
  position: relative;
}
#activity{
  float: left;
  position:relative;
  pointer-events:none;
}
#activity > * {
  pointer-events: all;
}

<div id="page1">
    <div class="formContent" id="noise">
      <p>Noise</p>
      <input type="button" id="nbtn1" value="Noisy" />
      <input type="button" id="nbtn2" value="Medium noisy" />
      <input class="active" type="button" id="nbtn3" value="Neutral" />
      <input type="button" id="nbtn4" value="Medium silent" />
      <input type="button" id="nbtn5" value="Silent" />
    </div>

    <div class="formContent" id="lighting">
      <p>Lighting</p>
      <input type="button" id="lbtn1" value="Bright" />
      <input type="button" id="lbtn2" value="Medium bright" />
      <input class="active" type="button" id="lbtn3" value="Neutral" />
      <input type="button" id="lbtn4" value="Medium dark" />
      <input type="button" id="lbtn5" value="Dark" />
    </div>

    <div class="formContent" id="temp">
      <p>Temperature</p>
      <input type="button" id="tbtn1" value="Cold" temp="test" />
      <input type="button" id="tbtn2" value="Cool" />
      <input type="button" id="tbtn3" value="Slightly cool" />
      <input class="active" type="button" id="tbtn4" value="Neutral" />
      <input type="button" id="tbtn5" value="Slightly warm" />
      <input type="button" id="tbtn6" value="Warm" />
      <input type="button" id="tbtn7" value="Hot" />

    </div>

  <div id="activity">
    <p>Activities</p>
    <input class="activityBtn" type="button" id="btn16" value="Reading" />
    <input class="activityBtn active" type="button" id="btn17" value="On Computer" />
    <input class="activityBtn" type="button" id="btn18" value="In Meeting" />
    <input class="activityBtn" type="button" id="btn19" value="Moving" />
    <input class="activityBtn" type="button" id="btn20" value="Other" />
  </div>

  <input type="submit" id="submitButton" value="Submit" />
</div>