Why child div hover does not working due to z-index?

Question

I added position:relative and z-index:-10 on #content in media query 767 pixel for resolving some issues on small screens and #content has a lot of dynamically generated child products. But due to added styles on #content child hover does not working, also products does not clickable.

HTML

<div id="content" >
    <div id="products" class="row list-group">
        <div class="child-product">...</div>
    </div>
</div>

CSS

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

I tried to overflow types for solving this issue, but does not working. Can any one guide me how can i fix this issue.

Answer 1

don't put a parent container value in negative (z-index: -10) you can give it a minimum value in Positive like(z-index:1) and so on according to you requirement and everything will work fine but don't put negative value

  #content{
   position:relative;
   z-index:1
}

Answer 2

If you want to position something in front of something else in CSS there are a few ways to do it.

First of all, regular elements are positioned in front of previous siblings:

<div class="one"></div>
<div class="two"></div>

In this case, 'two' is positioned ABOVE 'one', however without additional styles these divs wouldn't intersect so you can't really tell.

If we were to change the z-indices on either element, we wouldn't really be rearranging them, as z-index values have no effect on position: initial elements. Granting any of the elements position: relative or absolute, will place them above their siblings.

Two elements with position: absolute for instance, can then be modified with z-index, however don't use a negative z-index.