[已解决]flex布局显示问题

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

<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 提高这个层的优先级就行

跳转到最佳答案楼层

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

这个最佳答案由 542624047 给出，感谢 542624047 的回答。

单击隐藏图章

看代码

.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一起用的吗？

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的条件了。

账号		自动登录	找回密码
密码			立即注册