<ul class="slide-nav leftfix">
<li>
<!-- 一级菜单 -->
<a href="#">手机/运营商/数码</a>
<!-- 二级菜单 -->
<div class="second-menu"></div>
</li>
<li><a href="#">电脑/办公</a></li>
<li><a href="#">家具/家居/家装/厨具</a></li>
<li><a href="#">男装/女装/童装/内衣</a></li>
<li><a href="#">美妆/个护清洁/宠物</a></li>
<li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
<li><a href="#">男鞋/运动/户外</a></li>
<li><a href="#">房产/汽车/汽车用品</a></li>
<li><a href="#">母婴/玩具乐器</a></li>
<li><a href="#">食品/酒类/生鲜/特产</a></li>
<li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
<li><a href="#">医药保健/计生情趣</a></li>
<li><a href="#">图书/文娱/教育/电子书</a></li>
<li><a href="#">机票/酒店/旅游/生活</a></li>
<li><a href="#">众筹/白条/保险/企业金融</a></li>
<li><a href="#">安装/维修/清洗/二手</a></li>
</ul>
并且第一个li设置了相对定位。
.second-menu {
width: 700px;
height: 458px;
background-color: aqua;
position: absolute;
top: 0;
left: 0;
}
最终显示结果如下:
总结:定位可以越过padding,显示在padding上,并且定位元素的层级要高,绝对定位会遮盖住兄弟元素a标签以及父元素li标签,但是其他的li不受影响,其他的li标签设置了背景也会显示。