关于2-3的问题

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>控制堆叠顺序</title>
   <style type="text/css">
        *{margin:0;padding:0;}
       .block{
           width:80px;
           height:80px;
           border: 1px blue solid;
           text-align:center;
           line-height:80px;
            float:left;
       }
       .block:nth-child(1){
           /*border:1px red solid;*/
            position:relative;
            top:0;
            left:0;
            /*top:20px;
            left:10px;*/
            /*float:left;*/
            z-index: 1;
       }
       .block:nth-child(2){
           border:1px black solid;
            position:relative;
            /*top:20px;
            left:10px;*/
            top:0;
            /*left:-82px;*/
            left:-80px;
            z-index: 9;
       }
   </style>
</head>
<body>
   <div class="block">A</div>
   <div class="block">B</div>
</body>
</html>

为啥我这里left设置成-82px两个块才能叠在一起，而设置成80却不行，视频中设置成80可以重叠

慕丝0619063 2017-12-31

源自：CSS定位（position） 2-5 position-relative

收起

2回答

小丸子爱吃菜回答被采纳获得+3积分 2017-12-31 20:42:18

在老师引入的css重置代码中，设置了 box-sizing: border-box;

这个意思就是：

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

所以你要么，给元素设置 box-sizing: border-box;要么设置left为-82px；

祝学习愉快！

收起回答

慕丝0619063 提问者 #1

非常感谢！

2018-01-01 08:18:16
WORLD_CONNECTED #2

有点看不懂。。原文： 1.为元素设定的宽度和高度决定了元素的边框盒。 2.就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 3.通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。分析： 1行的“边框盒”是指盒子模型吗？那么这句的意思是：“为元素的高宽决定了元素的盒子模型”。这句话看不懂，尝试去掉形容词=>为高宽决定了盒子模型，更看不懂了。。。应该是我理解错了。。。 2行第4个字“为”是不是打错了。应该不要这个字。加上各自字后，后面的语意扑所迷离。【是不是你的口头禅。】 2行的意思是不是：只在元素的高宽范围内绘制绘制边框？ 3行的意思是不是：代码上设置的元素的高宽包括边框和内边距和内容，就像IE浏览器下的盒子模型一样？

2018-01-04 10:04:35
WORLD_CONNECTED #3

给元素设置 box-sizing: border-box; 要么设置left为-82px；这句话和我上面的理解有冲突了。我理解只是这个属性的值表示“边框在高宽内绘制”。你这个是指left为-82px的效果和box-sizing: border-box;的效果，在某种情况下效果是一样的？和“边框在高宽内绘制”有什么关系吗？

2018-01-04 10:08:05