top：距离顶部的距离。
left：距离左侧的距离。
css的left和top属性：指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。
left和top的使用必须伴随设置 position ： relative或者absolute；css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离。
所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。
扩展资料
在CSS中，有auto值，它可以用于像margin，position，height，width等属性。
auto关键字的使用因属性而异。对于本文，我将在每个属性的上下文中解释值。
width: auto块级元素(如<div>或<p>)的初始宽度是auto，这使得它们占据了包含它们的块的整个水平空间。当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。其中 content 的宽度将是content本身减去margin、padding和border。
【position:absolute】意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。
绝对定位具有以下属性：（下面的这些属性大家自己证明，对于下面说的“父级”，就是在原有的盒子外面，在套一层宽度和高度大于原有盒子尺寸的盒子）。
如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
主要区别可以总结为：
1、left指令要生效，必须其有position：relative或者position：absolute的定位才能执行；margin-left则不需要。
2、position:relative 只能定位在当前位置，受其父div位置的控制；position:absolute可以使div脱离文档源，位置由上一个有定位的祖div控制。
为了方便观察，我把背景颜色换了，然后把系统自带的内边距外边距都取消了）
具体输入*{background-color: #eee margin: 0px padding: 0px}
1.1 生成一个div，输入{border: 1px red solid height: 200px width: 200px left: 50px} 其效果图为:
这时候输入了left=200px，但是div并没有移动，这是由于他没有被定位，所以left指令无法实行。
1.2 但是如果对这个div进行相对定位或者绝对定位，那么它会定位在他所出现的位置，然后对left或top的指令再进行移动。这次我们把position：absolute/relative 加上，输入{border: 1px red solid height: 200px width: 200px left: 50pxposition：relative； }，其效果图为：
这时候他就会先根据他一开始的定位发生移动，left的指令就生效了。
1.3 接下来，把left指令，换为margin-left，把position的指令删除，输入{border: 1px red solid height: 200px width: 200pxmargin-left: 50px}，其效果图为：
这时候它就往右边移动了50px，也就是距离左边距50px。可以得出其指令并不需要position位，它直接规定边距的距离。
1.4 最后我们把position；left；margin-left都加上，输入{border: 1px red solid height: 200px width: 200px left: 50pxposition：relative；margin-left: 50px}， 其效果图为：
这时候两个指令都生效了。首先margin-left:50px, 先让这个div距离左边距50px，然后position:relative的指令使div定位在这个位置，最后left:50px；的指令，使div再距离所定位的位置50px，所以一共离左边距100px。
创建以下三个div：
<div id="father">
<div id="son">
<div id="grandson"></div>
</div>
</div>
1、在style分别输入
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px position:relative }
其效果图为：
这时候#son并没有position，但是#grandson的position为relative，所以他只能对当前的定位（由于他是father与son的子文件，所以会跟他们进行相关的位移后，再实施它自己的指令进行位移，所以一开始的定位应该在黑色框内的右上角）进行位移。
2、保持其他参数不变，然后把#grandson的position:relative 给为position:absolute，具体为：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px position:absolute }
其效果图为：
此时，由于#grandson的position为absolute，即脱离文本源，就是他不会受没有定位的父div的影响，就是说其定位会忽略没有position定位的div，而直接找到最近一个有定位的祖div，再进行定位，所以它直接找到的是#father的定位，然后想对它定位后再进行left=50px的指令。
3. 要证明这一点很简单，我们再给#grandson生一个子div id="ggson"
这时候布局如图：
在style输入：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px position:absolute }
#ggson{border: 1px green solid height: 25px width: 25pxleft:10px position:absolute}
其效果图为：
#ggs的定位追踪到#grandson上，所以在其定位上做出left=10px的指令。
这时候我们在吧#grandson的position给删掉，输入：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px}
#ggson{border: 1px green solid height: 25px width: 25pxleft:10px position:absolute}
这时的效果图为：
由于#son与#grandson上面都没有position的定位了，所以#ggson只能定位到father的position上面。
最后我们再把#ggson的position:absolute改为relative,输入：
#father{border: 1px red solid height: 200px width: 200px left: 100pxposition:relative； }
#son{border: 1px black solid height: 100px width: 100pxmargin-left: 200px }
#grandson{border: 1px blue solid height: 50px width: 50pxleft:50px}
#ggson{border: 1px green solid height: 25px width: 25pxleft:10px position:relative}
其效果图为：
这时候他就不会找祖div的position，其定位只接受其父div控制，只能定位在所在的位置。
定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
