背景色怎么把前面的标签覆盖了？
慕粉3830774
2016-08-24 09:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Padding testing</title>
<style type="text/css">
a{
width:100px;
line-height:30px;
background: red;
padding:10px;
}
</style>
</head>
<body>
<p>nsihi</p>
<a >woshi</a>
<p>nsihi</p>
</body>
</html>
随着padding值的不断增大，a标签的背景色会将前一个p标签覆盖，而后一个p标签却依然显示，这是为什么
1回答
-
- xue5hen
- 2016-08-24 10:34:22
你按绝对定位元素的思路去理解，如果位置重叠且前后元素层级相同，那么后面的元素默认会覆盖在前面元素之上。
虽然，这里并未对三个元素进行绝对定位，但是默认的也是有z-index属性的，只不过是auto。三个元素均为auto，那么自然就会后者覆盖前者了。详细的可以参考下老师的z-index的相关课程，里面对层叠顺序进行说明。
7阶层叠水平（stacking level）从低到高依次如下：
层叠上下文（background/border）
负z-index
block块状水平盒子
float浮动盒子
inline/inline-block水平盒子
z-index:auto或看成z-index:0
正z-index
CSS深入理解之padding
52482 学习 · 56 问题
相似问题