top和left等属性

  .zhezhao{
              position: absolute;
             width: 380px;
            height: 240px;
          
            opacity: 0.5;
            background-color: black;
            z-index: 1;
          
        }

.zhezhao{
              position: absolute;
             width: 380px;
            height: 240px;

            opacity: 0.5;
            background-color: black;
            z-index: 1;
            top: 0;
            left: 0;
        }

第一段代码是没加left和top属性的，第二段代码加了这两个属性之后，为什么就在上面去了呢？

left和top与margin-left和margin-top有什么区别呢

陌路旅人 2018-09-05

源自：网页布局案例 2-4 编程练习

收起

2回答

好帮手慕阿莹 2018-09-05 17:51:19

1、left和top 是设置它的偏移量。margin-left和margin-top是设置它的外边距。因为第一段代码没有写left和top等，则它相当于没有写position: absolute;

2、截图中所说的包含块左边界可以理解为它的父元素的左边界。如果它的父元素没有设置偏移量或者position: 属性，则它会默认去找浏览器的左上角作为原始的定位点，相对于浏览器左上角进行偏移，此时也就是body作为它的包含块儿了。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者陌路旅人 #1

那什么是设置为0呢？为什么设置为0就遮罩成功了

2018-09-05 18:04:38
提问者陌路旅人 #2

还有偏移量是相对于父元素的偏移量吗？那这里父元素是指什么？是指上一个加了定位的元素还是指什么呢

2018-09-05 18:07:29
好帮手慕阿莹回复提问者陌路旅人 #3

1、设置为0表示它相对偏移量为0，如果它没有父元素，或者父元素没有设置position: 属性属性。则它相对浏览器的左上角为原点进行偏移。所以设置left为0 ，top为0 后它定位到浏览器的左上角去了。所以就遮罩成功了 2、父元素就是例如：<div><a></a><div> div就是a的父元素。

2018-09-05 18:24:20