Html 使重叠div中的按钮可单击

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

但是当我这样做的时候，按钮“Warm”和“Hot”就不能再点击了（因为另一个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>

---

我试着用你给出的代码制作一个代码笔，但其中缺少一些要点：(

试试这个

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

及 在包含按钮的Temperature div上添加

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

编辑 Codepen

只有添加的代码位于底部，即：

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

---

我为您创建了一支钢笔：

---

我在

#activity

中添加了

负z索引

，在

#formscales

中添加了

正z索引

。我认为这比

#temp

div上的z索引更好，因为它将在

3个子div

上工作，而不仅仅是在

#temp

div上。这应该更易于维护

正如val在注释中所提到的，可以为父级禁用指针事件，但为其子级维护它们

只需应用以下代码：

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

以下是完整的示例（基于创建的钢笔NooBskie）：

正文{
垫面：4px；
背景色：#ececec；
边缘顶部：16px；
左边距：0px；
右边距：0px；
}
#第1页{
高度：480px；
宽度：320px；
显示：内联；
}
#formScales{
位置：相对位置；
/*否则，子对象的浮动会将其取出
文档流的定义*/
溢出：自动；
}
#活动{
位置：相对位置；
溢出：自动；
利润上限：-77px；
}
#跳过{
职位：亲属；
溢出：自动；
边缘顶部：7px；
}
#噪音{
浮动：左；
宽度：31vw；
左边距：5px；
右边距：5px；
边缘底部：7px；
背景色：rgba（255、204、204、0.3）；
}
#照明{
浮动：左；
宽度：31vw；
左边距：0px；
右边距：5px；
边缘底部：7px；
背景色：rgba（255、255、153、0.3）；
}
#临时工{
浮动：左；
宽度：31vw；
左侧填充：0px；
右边填充：0px；
边缘底部：7px；
背景色：rgba（255、204、153、0.3）；
}
p{
字体系列：Verdana、arial、无衬线字体；
字号：10pt；
字体大小：粗体；
文本对齐：居中；
填充顶部：0px；
边际上限：0px；
边缘底部：0px；
}
.活动{
浮动：左；
高度：31vw；
宽度：31vw；
左边距：5px；
}
.主动{
背景色：#99CCFF！重要；
边框：1px实心#606060；
}
#提交按钮{
浮动：左；
高度：12vw；
宽度：300px；
左边距：5px；
右边距：5px；
背景色：透明；
背景重复：无重复；
背景位置：20px 10px；
垂直对齐：中间对齐；
/*线条高度：160px；背景图像：url（icons/photo74.png）*/
背景色：#77DD77；
}
输入{
/*webkit外观：无可替代标准按钮设计*/
-webkit外观：无；
颜色：#3B444B；
宽度：100%；
文字装饰：无；
文本对齐：居中；
填充：8px 12px；
边缘顶部：5px；
字体大小：12px；
字号：700；
字体系列：helvetica、arial、无衬线字体；
边界半径：2px；
边框：1px实心#606060；
背景色：rgba（255255,0.8）；
-webkit盒阴影：0 1px 3px rgba（0,0,0,0.12）；
盒影：0 1px 3px rgba（0,0,0,0.12）；
}
/*css基类*/
baseActivityBox，
/*从基类继承*/
#btn16，
#btn17，
#btn18，
#btn19，
#btn20{
背景色：透明；
背景重复：无重复；
背景位置：20px 10px；
垂直对齐：中间对齐；
线高：160px；
}
#btn16{
背景图片：url（icons/man216.png）；
}
#btn17{
背景图片：url（icons/work12.png）；
}
#btn18{
背景图片：url（icons/businesser.png）；
清除：左；
}
#btn19{
背景图片：url（icons/business163.png）；
}
#btn20{
背景图片：url（icons/other.png）；
}
#btn21{
宽度：30vw；
左边距：5px；
背景色：#ED2939；
}
#btn22{
宽度：65vw；
背景色：#ED2939；
}
.formContent{
位置：相对位置；
}
#活动{
浮动：左；
位置：相对位置；
指针事件：无；
}
#活动>*{
指针事件：全部；
}

噪音

照明

温度

活动

这里有一个指针，它可能有助于将指针事件设置为“无”，也会禁用子对象的指针事件。我想这不是OP想要的。@Thomas不是真的…看看Allison在链接问题中的答案我以前见过这个问题…但问题是您必须将父对象设置为

指针事件：无；

这是什么这是一个问题！

指针事件：所有；

都不起作用……无论如何，谢谢！@vals啊，我不知道。谢谢你的提示。我会选择这个解决方案。它比处理z索引要优雅得多。谢谢你的回答！这个主意看起来很好-但仍然不起作用！可能是因为

\temp

div在的内部e> .formContent？我用更新了我的问题并添加了整个html！也许这有帮助-我还创建了一个JSBin，但它给了我错误…抱歉，但它仍然不起作用！-在你的代码笔中，如果你尝试单击其中一个活动按钮的上半部分，则不会发生任何事情：（-在我的例子中，这几乎是完整的按钮，因为它们更接近together@PeterPiper如果这很重要，显然要把它放在

#temp

分区上。我不确定这些活动是否可以单击。顺便问一下，你为什么使用

id

而不是

类

？

#formScales {
    position: relative;
    overflow:auto;
    z-index: 1;
}

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

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