父盒子的display为flex时,如何让子盒子的outline如何不被兄弟盒子盖住?

图片描述

图片描述

图片描述

1、先弄两个border为1px的div,显示如图一;
2、给第一个div设置outline,显示如图二,此时表现正常;
3、给两个div的父盒子设置display: flex;flex-direction: column; 则显示如图三,测试第一个div的outline被第二个给盖住了,而我的期望是设置flex后表现仍能够跟图二相同。

求大神指点~~

阅读 3.7k
1 个回答

其实你加不加display: flex两个盒子的边线都会靠在一起,因为outline是不算在盒子的尺寸里的,区别只在于你的图二是第一个盒子盖在了第二个盒子上,而图三是第二个盒子盖在了第一个盒子上,所以要想实现图二的效果的话,给第一个盒子加一个z-index: 1000,第二个盒子加一个z-index: 500,这样第二个盒子永远不会盖在第一个盒子上,而第一个盒子永远盖在第二个盒子上,这样就算你用display: flex,也是图二的效果了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题