Some clicks are not working in html

Question

I have a html like this

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

<div class="contnt">

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

the div1 have the css like

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

and the div cross have

.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%;
}

and the div contnt have

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

The problem is I can't Click the button in div contnt.the hyper link,button and anything in the div contnt is not working.anyone know what is the problem.any suggestion ?

Without a jsfiddle, my best guess is that your `.cross` div is just overlapping with everything else since you're using `position:absolute`, you can use firebug to check that. — woutr_be, Jun 03 '13 at 08:30

score 6 · Answer 1 · answered Jun 03 '13 at 08:30

6

The z-index:1000 on .cross is putting it in front of your button. That applies to clicks as well as rendering.

answered Jun 03 '13 at 08:30

RichieHindle

272,464
47
358
399

1

Yes ..I also think that is the problem.how can I overcome this.I need the .cross in front of other div. – Arun Jun 03 '13 at 08:37
1

You may need to rethink your design implementation. – gersande Jun 03 '13 at 08:38
1

@Arun: There's no trivial answer (assuming simply adding a click handler to `cross` as Khior suggests is not enough). See http://stackoverflow.com/questions/1737480/passing-mouse-clicks-through-an-overlaying-element-div – RichieHindle Jun 03 '13 at 08:42
Try putting `pointer-events: none;` in the CSS declaration for `.cross` – itsmejodie Jun 03 '13 at 08:42
@itsmejodie: `pointer-events: none;` is not supported in any version of IE - see http://caniuse.com/pointer-events – RichieHindle Jun 03 '13 at 08:43
@itsmejodie yes correct it is not supporting in IE.But it is fine working in chrome.any solution? – Arun Jun 03 '13 at 08:58
@Arun does this help: http://www.vinylfox.com/forwarding-mouse-events-through-layers/ – itsmejodie Jun 03 '13 at 09:08

Khior · Answer 2 · 2013-06-03T08:44:49.153

To begin with, you need a closing tag for your .cross div:

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

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

Also, your button is being obscured by the .cross div due to z-index 1000 on the .cross div. You will need to either:

bind the click event to the cross, or

move the button out from underneath the cross to somewhere that it may be clicked.

You can bind the event to the cross by using a snippet of javascript like this:

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

Some clicks are not working in html

2 Answers2