绝对定位中的top,right,left,bottom问题
来源：2-8 position-absolute（实际工作用的最多，同时也相对比较难）
danny前端学习
2020-04-23 22:57:06
不太懂课程里讲述的通过设置绝对定位中top,right,left,bottom从而实现子元素移动的原理。
首先，我理解top,left,right,bottom是子元素相对父元素间隙的设置，全设置为0并且在没有宽高的情况下子元素会完全覆盖父元素。
但是，当我们设置宽高并且将left right设置为0，为何子元素是紧贴父元素左上角？right:0;在这里似乎并没有起到什么作用。此外，再添加margin:0 auto的设置也比较诡异，将上下间隙设为0，左右为auto，为什么就能将子元素从左上角拉到上中位置呢？
还请老师帮忙解答！谢谢！
2回答
-
我也刚刚学了这一课，在老师回答前我说一下我自己对这个的理解。
首先在left：0； right：0； 没有设置margin的情况下，为什么显示在左上角。是因为对计算机来说这个语法组合在一起是错误的，不成立。所以它就直接忽略了left和right的属性要求。把它按照文档流的排序方法排到了左上角。
而为什么加了margin：auto就成立了呢。还是那句话计算机是死物，他执行的每一个运算都需要你给他下指令以后他才能执行。否则不符合他的运算规则语法或属性他就会直接忽略不予执行。所以在left：0； right：0；时， 你需要用margin：auto（auto“自动”的意思）明确告诉计算机，遇到这用情况你自己看着办。他才会学真的自己看着办选折中的位置。
这是我自己的理解哈，若有不准确的地方，还请见谅。
1 -
好帮手慕言
2020-04-24
同学你好，关于同学的疑问，解答如下：
1、元素定位之后，同时设置left和right后 , left优先生效。因此元素在左上角。
2、可以称为拔河效应。设置left：0 ；想要让它显示在左边 ，设置了right:0，又想要让它显示在右边 ，两边都在拉它 ，设置margin:0 auto;之后，会直接在中间显示。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1
相似问题