qina10 发表于 2019-12-24 16:41:23

flex布局显示问题

如图，鼠标经过的时候，后面方块的阴影可以覆盖前面的方块，而前面的方块却不能覆盖到后面的方块上，请问这个有办法解决吗？

    <style>
      .bg{
            display: flex;
            width: 800px;
            height: 800px;
            margin: 50px auto;
            background-color: #000;
            flex-wrap: wrap;
      }
      .bg div{
            width: 200px;
            height: 200px;
            background-color: rgb(65, 255, 239);
            box-shadow: 0;
      }
      .bg div:hover{
            transition: box-shadow, 1s;
            box-shadow: 0 0 15px rgb(204, 74, 255);
      }
    </style>

<body>
    <div class="bg">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</body>

542624047 发表于 2019-12-25 15:39:54

看代码 .bg div:hover{
                            transition: box-shadow, 1s;
                            box-shadow: 0 0 15px rgb(204, 74, 255);
                                        z-index: 999;
                        }只要再里面加一个zi-index提高这个层的优先级就行

qina10 发表于 2019-12-25 16:05:24

542624047 发表于 2019-12-25 15:39
看代码只要再里面加一个zi-index提高这个层的优先级就行

非常感谢！！解决了，但是不是说z-index是需要和position一起用的吗？{:10_291:}

542624047 发表于 2019-12-25 16:24:49

qina10 发表于 2019-12-25 16:05
非常感谢！！解决了，但是不是说z-index是需要和position一起用的吗？

z-index可以单独用啊，只不过一般的position都是静态，各个元素不会堆叠在一起，你设置也看不出来区别，所以一般才要position变成absolute或者fixed使元素有堆叠时使用，而你在这里用了box-shadow 阴影部分是多出来的，并且和其他的块级元素有堆叠了，所以这个时候有了使用z-index的条件了。
页: [1]
查看完整版本: flex布局显示问题