Question

我在媒体查询position:relative像素的z-index:-10上添加了#content和767，用于解决小屏幕上的一些问题，#content有很多动态生成的问题儿童用品。但是由于#content上添加的样式，孩子悬停不起作用，产品也无法点击。

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
}

我尝试使用overflow类型来解决此问题，但无效。任何人都可以指导我如何解决这个问题。

Answer 1

不要将父容器值放在负数（z-index：-10），你可以给它一个正值的最小值，如（z-index：1）等等根据你的要求，一切都会正常工作但不要放负值

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

Answer 2

如果你想在CSS中的其他东西前放置一些东西，有几种方法可以做到。

首先，常规元素位于前一个兄弟姐妹面前：

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

在这种情况下，＆＃39;两个＆＃39;位于上面＆＃39;一个＆＃39;但是没有其他风格，这些div不会相交，所以你无法说出来。

如果我们要更改任一元素的z-indices，我们就不会重新排列它们，因为z-index值对position: initial元素没有影响。授予任何元素position: relative或absolute，都会将它们置于兄弟姐妹之上。

例如，可以使用z-index修改具有position: absolute的两个元素，但不要使用负z-index。