绝对定位的遮挡

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

最终显示结果如下:
绝对定位的遮挡_第1张图片
总结:定位可以越过padding,显示在padding上,并且定位元素的层级要高,绝对定位会遮盖住兄弟元素a标签以及父元素li标签,但是其他的li不受影响,其他的li标签设置了背景也会显示。
绝对定位的遮挡_第2张图片

你可能感兴趣的:(前端,css,html)