                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

<li>的下边框为什么可以覆盖<div>的上边框？而不是相反？

#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;}

beiyanwanjun

2018-06-05

源自：JavaScript进阶篇 10-1

关注问题我要回答

1126

操作

收起

1 回答

轩辕sama
2018-06-15

经过我半小时的测试：如果你把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。这样子谁在上谁在下清清楚楚。