Div with superior z-index cancels another div with lower z-indez

Asked

Viewed 295 times

3

I have 2 Divs.
The first has z-index 1 and position Fixed.
The second div has z-index 2 and position relative.

The second div has a very extensive content and among the contents, there is a blank part with 500px height.
When passing through this blank part, the contents of the first div is revealed, but I have a button and I cannot click this button.

In the CSS of the second div I put the following code, but the buttons of the second div stopped working.

pointer-events: none

How do I invalidate the white space of the second div so that it is possible to click the button that is first div?

html css

1 answer

2


I don’t know if I understand it very well, but I believe you can use this css:

.button-click{ Pointer-Events: auto; }

"button-click" would be the button class.

*EDIT

I made some changes to your jsfiddle, see here: http://jsfiddle.net/s0kvg269/.
Basically I put the . D1 inside the . D2, took the position: Absolute of the . D2, and the . content covering the . D1 I left with position: relative.

  • here is an example: http://jsfiddle.net/5LfhffrL/ scrolls down, a red div will appear, tries to click on "button 1" or "button 2", you will notice what I am saying.

  • I edited the comment, I think it’s now as expected.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.