关于2-3的问题

来源：2-5 position-relative

慕丝0619063

2017-12-31 08:27:23

<!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可以重叠

写回答

2回答

小丸子爱吃菜

2017-12-31

已采纳

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

这个意思就是：

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

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

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

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

祝学习愉快！

hORLD_CONNECTED

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

h018-01-04

共3条回复