老师我的红框总是偏右一点，麻烦看一下
来源：2-5 position-relative
qq_慕先生2229342
2020-04-16 15:50:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-relative</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.block{
position: relative;
top: 0px;
left: 0px;
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid black;
text-align: center;
float: left;
}
.block:nth-child(2){
position: relative;
top: 0px;
left: -80px;
border: red 2px solid;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
</body>
</html>
2回答
-
同学你好，这和浏览器默认样式有关系。有一个样式同学还没有学到，老师给你讲一下，简单了解就行，以后会学到的。
浏览器默认样式中，有一个是 box-sizing:content-box; ，作用是在宽度和高度之外绘制元素的内边距和边框。通俗的说，就是设置的边框和内边距不包含在我们设置的width: 80px; ，所以总宽度需要width基础上加上内边距和边框的宽度。
而有的浏览器默认样式可能是box-sizing: border-box;，作用是为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。这个时候80px已经包含了边框的宽度。
同学可以设置一下这个属性，此时left: -80px;就能重叠了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕夭夭
2020-04-16
同学你好，因为div设置了边框，边框包含在盒子的实际宽度中。所以想要完全覆盖另一个div，需要设置如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-04-16
相似问题