Z-index prevents item to get clicked

Question

I have a container div with inset drop shadow on it, I also have child elements inside of this container, and I simply want these children to be clickable.

Setting the children (images in my project, not sure if it matters) element's z-index to -1 is essential for the drop shadow to show. But doing that the container will cover the child elements, so click won't work.

Setting pointer-events: none; on the container element didn't help either (I also want the container to be scrollable).

$('.item').on('click', function() {
  alert($(this).attr('id'));
});

    .container {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      box-shadow: inset 0 0 10px black;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .item {
      width: 250px;
      height: 80px;
      margin: 3px 0;
      background-color: #cacaca;
      position: relative;
      text-align: center;
      z-index: -1;
      /*Shadow visible, JS doesn't work*/
      /*z-index: 0;*/
      /*Clickable, but shadow is covered */
    }

<div class="container">
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
  <div class="item" id="item2">
    <p>CLICK</p>
  </div>
  <div class="item" id="item3">
    <p>CLICK</p>
  </div>
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
</div>

JSFiddle

How can I keep the shadow, and make the child elements clickable?

Answer 1

Why its happening

The reason this is happening is because the divs with the class .item is behind the .container, meaning the user is in fact clicking on the .container, NOT the .item.

Solution

You can wrap your div's with a wrapper like so:

<div class="container">
    <div class="item" id="item1">
        <div><p>CLICK</p></div>
    </div>

    <div class="item" id="item2">
        <div><p>CLICK</p></div>
    </div>    

    <div class="item" id="item2">
        <div><p>CLICK</p></div>
    </div>

    <div class="item" id="item3">
        <div><p>CLICK</p></div>
    </div>
</div>

and update your CSS from .item to .item > div [BUT leave the JS as it is]

This way, the outer .item is still in front of the .container and the inner div is behind the .container, meaning it's still clickable and you get the styling you want!

Proof it works!

Check the following JS Fiddle out: https://jsfiddle.net/anik786/5oe841sw/6/

Here's a screenshot: