为什么我的两个框框不完全重叠的？
来源：2-5 position-relative
qq_慕移动3101913
2019-07-16 16:14:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.block{
width:80px;
height:80px;
line-height:80px;
text-align:center;
/*border:1px solid red;*/
}
.a{
border:3px solid red;
float:left;
position:relative;
top:0;
left:0;
/*z-index: 9;*/
}
.b{
position:relative;
top:0px;
left:-80px;
border:3px solid blue;
float:left;
/*z-index: 1;*/
}
</style>
</head>
<body>
<div class="block a">A</div>
<div class="block b">B</div>
<!-- <div class="block">C</div> -->
</body>
</html>
1回答
-
你好同学，一个盒子的实际宽度包含border，padding，width。代码中设置了3px的边框。那么盒子宽度要加上左右边框个3px，实际宽度为86px.
想要盒子重叠，就要移动一个盒子的实际宽度，改为如下即可
如果不理解盒子的实际宽度，建议复习一下盒模型课程哦。视频地址如下：
http://class.imooc.com/course/754
祝学习愉快，望采纳。
0h019-07-16
相似问题