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，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。需要注意的是
position 属性默认或者设为static时候
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。left是无效的。
CSS left 属性用来指定被定位元素左侧边缘的位置。该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移。left是一个偏移属性，偏移属性用于指定一个被定位元素的精确位置，对于static的元素没有效果。要使用这个CSS属性，必须为元素设置一个position值，而不能是默认的static定位方式。
在CSS中，可用的偏移属性有四个，包括top、right、bottom和left。
对于绝对定位的元素，即position属性设置为absolute的元素，left属性指定元素左侧边距边缘和包含该元素的容器的左侧边缘的距离。
对于相对定位的元素，即position属性设置为relative的元素，left属性指定元素的左侧边界离开其正常位置的距离。
对于固定定位或sticky定位的元素，left属性指定元素到视口左侧边缘的距离。
官方语法
left: | | auto
参数：
：使用固定的长度值指定元素的左侧偏移。长度值可以参考数据类型。长度值允许为负数。
：使用元素的包含块的百分比值来指定左侧偏移值。百分比值可以参考数据类型。百分比值允许为负数。
auto：当left属性设置为auto的时候，分为两种情况：
如果元素是相对定位的，在水平方向上会根据right属性的值来定位。如果right属性也设置为auto，那么元素在水平方向上不会移动。
如果元素是绝对定位的，在垂直方向上会根据right属性的值来定位。如果元素的宽度设置为auto，那么元素的宽度会随着内容的增加而增长。
left属性的初始值为auto。
left属性可以使用inherit属性从它的父元素中继承左侧偏移值。它的父元素不一定是它的定位上下文。
应用范围
left属性可以应用在所有可以被定位的元素上。
示例代码
/* 使用长度值 */
left: 3px
left: 2.4em
/* 使用元素包含块的百分比值 */
left: 10%
/* 使用关键字 */
left: auto
left: inherit
在线演示
1、在相对定位的元素上使用left属性：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
2、在绝对定位的元素上使用left属性：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
