Question

我有一个像这样的HTML

<div class="div1">
<div class="cross">
</div>

<div class="contnt">

<input type="button" onclick="submitdata()"/>
</div>

div1有css之类的

.div1 {
padding: 35px 11px 15px;
margin-bottom: -12px;
border: 0px none;
}

和div十字架

.cross{
width: 511px;
height: 100%;
background: url(../images/cross01.png) repeat-y;
position: absolute;
top: 0px;
right: 5px;
z-index: 1000;
background-repeat: no-repeat;
background-size: 100% 100%;
}

并且div contnt

.contnt{    
position: relative;
    height: 299px;
    width: 267px;
}

问题是我无法单击div contnt中的按钮。超级链接，按钮和div contnt中的任何内容都不起作用。任何人都知道问题是什么。有什么建议吗？

Answer 1

z-index:1000上的.cross将它放在按钮前面。这适用于点击和渲染。

Answer 2

首先，您需要.cross div的结束标记：

<div class="div1">
    <div class="cross"></div>
</div>

<div class="contnt">
    <input type="button" onclick="submitdata()"/>
</div>

此外，由于.cross div上的z-index 1000，您的按钮被.cross div遮挡。您需要：

将点击事件绑定到十字架，或

将按钮从十字架下方移到可能被点击的某个位置。

您可以使用这样的javascript片段将事件绑定到十字架：

var cross = document.getElementsByClassName('cross'); 
cross[0].onclick = submitdata;

有些点击不适用于html

2 个答案: