黑马程序员技术交流社区

标题: 绝对定位 [打印本页]

---

作者: 一米阳光`·`    时间: 2017-5-17 21:40
标题: 绝对定位
代码 显示效果如上.....
给.two设置绝对定位后再给top:20px; 问题是.two盒子离左边为什么这么远,给子盒子设置绝对定位,父盒子没有定位时,子盒子会以body的左上角为基点定位,()以我理解这时.two盒子应该是离body左上角top:20px;left:0)但是如图,为什么?

---

作者: J0bs    时间: 2017-5-17 23:37
.two是.one的子元素，他会继但是承父元素的样式，top是绝对定位设置距离设置了relative(这里是body)的元素上边距，并不是因为字元素设置了绝对定位他就完全不受父元素约束，除非重写了父元素的所有属性，进行了覆盖，你在调试.two时候就可以发现margin-top被覆盖了，而margin-left并没有！

---

作者: 一米阳光`·`    时间: 2017-5-17 23:52

J0bs 发表于 2017-5-17 23:37
.two是.one的子元素，他会继但是承父元素的样式，top是绝对定位设置距离设置了relative(这里是body)的元素 ...

就是说.two继承了父元素的属性,  
.one有margin: 200px 0 0 200px;      
  .two的top:20px;是对body
,就把.one的margin-top重写了,
而left没有重写,所以左边距离同.one

---

作者: J0bs    时间: 2017-5-18 07:11

一米阳光`·` 发表于 2017-5-17 23:52
就是说.two继承了父元素的属性,  
.one有margin: 200px 0 0 200px;      
  .two的top:20px;是对body

嗯嗯，就是这个意思

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2