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，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
根据W3C的解释为：position 属性规定元素的定位类型，把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit：规定应该从父元素继承 position 属性的值。
我们用的最多的absolute和relative，接下来可以通过具体例子来更加直观地体现。
举例一：绝对定位
position: absolute；绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
#box_relative {
position: absolute
left: 30px
top: 20px
}
二：相对定位
position: relative；相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative {
position: relative
left: 30px
top: 20px
}
注意
position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inlinedisplay:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline来解决的。position:relative不会隐式改变display的类型。
元素就是构成HTML的那些标签，如下表：
内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量
块元素(block element)
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet - java applet
button - 按钮
del - 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
script - 客户端脚本
