使重叠 div 中的按钮可点击

Question

我有两个 div，每个 div 都有按钮。div 应该以最节省空间的方式排列，如下面的屏幕截图所示：

但是当我这样做时，无法再单击“暖”和“热”按钮（因为另一个 div 正在重叠。

解决这个问题的好方法是什么？

这是我的 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>

和 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

我尝试使用您提供的代码制作 Codepen，但其中缺少一些要点:(

尝试这个

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

并在包含按钮的温度 div 上添加

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

编辑 Codepen http://codepen.io/noobskie/pen/JYdGvb

唯一添加的代码位于底部，即：

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