老师我的红框总是偏右一点，麻烦看一下
<!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>
正在回答
同学你好，这和浏览器默认样式有关系。有一个样式同学还没有学到，老师给你讲一下，简单了解就行，以后会学到的。
浏览器默认样式中，有一个是 box-sizing:content-box; ，作用是在宽度和高度之外绘制元素的内边距和边框。通俗的说，就是设置的边框和内边距不包含在我们设置的width: 80px; ，所以总宽度需要width基础上加上内边距和边框的宽度。
而有的浏览器默认样式可能是box-sizing: border-box;，作用是为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。这个时候80px已经包含了边框的宽度。
同学可以设置一下这个属性，此时left: -80px;就能重叠了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星