<li>的下边框为什么可以覆盖<div>的上边框？而不是相反？
来源：10-1 编程挑战
beiyanwanjun
2018-06-05 18:02
#tabs ul li.on
{border-top:2px solid red;border-bottom:2px solid #fff;}
#tabs div
{height:120px;border:1px solid blue;border-top:2px solid red;padding:5px;}
写回答
关注
1回答
-
- 轩辕sama
- 2018-06-15 16:10:25
经过我半小时的测试： 如果你把li设置成了display: inline-block或者干脆就是inline的话，就是li的下边框覆盖div的上边框。这大概可以理解成文字等行内元素默认z-index就比块元素div等高（当然因为大家都没有position事实上不是z-index的差别，而是某种设定。毕竟常规来说让一个div覆盖掉文字是不大常见的。）事实上经过测试，inline = inline-block > block。而如果是两个优先级相同的（如两个block，一个inline和一个inline-block），后面元素覆盖前面元素（这和有position情况下z-index一样的情况相同）。所以如果你li还是block，那么就是div的上边框覆盖li的下边框啦。
当然，最好还是设个position然后定个z-index。这样子谁在上谁在下清清楚楚。
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468060 学习 · 21891 问题
相似问题