定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定为不会影响整个文档布局，而绝对和固定定位则会脱离文档，因此页面不会为这两类定位元素预留空间。在预设状态下，所有元素均是静态的定位方式，也即这些元素按照原本的从上到下及从左到右的顺序进行排布。
只要为该元素设定了「position」属性，你就可以使用「top」、「right」、「bottom」和「left」这四个属性来精准定义其应该所在的地方。
在这个示例中，归属Element类别的元素将相对于其原来所在的位置分别向右和向下移动50个像素。若在此将「position」的值改为「absolute」或「fixed」，那么该元素将离最近的已定位的祖先元素的左边缘和上边缘分别距离50个像素。
我们一般使用「left」和「top」这两个属性就够了。如果想要避免元素在定位后，其尺寸会随着浏览器视窗的变化而变化出意想不到的结果，那么你应该先设定好该元素的大小，然后再定位其左上方的点。
相对定位相对定位是相对于正常排列的位置进行偏移，该元素原本所在的位置会被空出来，空出来的部分仍然会影响到后续元素的排列效果。
如上图所示，position:relative仅仅影响了元素本身，其原有位置被保留，但由于它向右上方进行偏移，因此遮住了第一部分文字的部分区域。
元素是相对于包含它的块来定义的，这个块是当前定位元素的父元素或祖先元素。在上例中，<body>即为包含这三个段落的块。如果对样式表做一些修改，新增
然后将这三个段落放在ID为「Pos」的<div>标记内，那么这三个段落将集体向右偏移50个像素，而其中的「Element」类别的段落将以这个<div>为基准进行偏移——即相对于包含它的块进行偏移。
除了包含块以外，还有匿名块。如果包含块内同时有块级元素和巢状元素，那么浏览器将自动建立匿名块：
当这两种元素混杂在一起时，匿名块能够让浏览器正确地建立页面布局。如果将上述<div>的定位方式由「static」改为「relative」，那么，匿名块能够正确地安排其中的巢状文字和段落。
如果有两个相对定位的元素以巢状形式出现，那么内部的那个元素是相对于外部的——也就是它的父元素来定位，而外部的那个元素是相对于<body>来定位的。
绝对定位
相对定位中的「top」、「right」、「bottom」和「left」被用于设定相对于该元素原本所在位置的偏移量，而绝对定位的这四个属性则不太一样。在绝对定位中，「top」指的是被定位元素上方的外边框和包含块上方的内边框之间的距离。换句话说，被定位元素的外边距和包含块的边框会影响top的值，进而影响绝对定位元素的位置，但包含块的内边距不会产生任何影响。在相对定位中，「top」指的是被定位元素上方的外边框和其原始位置的上边缘的距离。
「bottom」的含义与「top」差不多，它指的是该定位元素下方的外边框和包含块下方的内边框之间的距离。「left」和「right」也大抵如此。
这样看来，定义元素的尺寸又多了一种新方式，除了直接设定其「width」和「height」属性以外，你还可以同时定义「left」和「right」来设定其宽度，同时定义「top 」和「bottom」来设定其高度，设置可以同时定义这四个属性，这样的话，该元素的尺寸就完全定下来了。如
如果有一个绝对定位元素位于其它相对或绝对定位元素的内部，那么该巢状元素将以相对于包含元素的方式被定位。例如下面的范例：网页内有一张图片，使用者可以在这张图片上添加矩形，然后往其中写一些说明文字。
HTML档案的内容如下：
CSS档案的内容如下：
效果如下：
在一个相对定位的<div>元素中，添加了一张图片，然后又添加了一个绝对定位的<div>元素。那为何要将外部的<div>——也就是ID为「Pic」的元素设定成相对定位呢？很简单，因为要使它所包含的元素以它为基准进行定位，而不至于飘到别处去，以至于覆盖了别的元素。
上面的这个例子就是一个简单的覆盖——利用绝对定位元素脱离文档的特征来在图片上建立一个覆盖层，这个例子可以作一点改进：当使用者点选图片的左半边区域时，让浏览器显示上一张图片；当使用者点选图片的右半边区域时，让浏览器显示下一张图片。
首先删除之前的覆盖层，建立两个连结。
HTML档案的内容如下：
CSS档案的内容如下：
效果如下：
默认情况下，所有的元素都是静态定位(position: static)，在默认情况下，如果：
<div id="wrap><div id="content">content</div>
</div>
这时候，如果内部#content 这个div使用绝对定位，那么这个内部div#content 不是相对于外部div#wrap来定位，而是相对于div#wrap的祖先元素中包含（position:relative或者 position:absolute）的那个祖先元素来定位，如果div#wrap的祖先元素都没有（position:relative或者 position:absolute），那么div#content相对于<body></body>来定位。
一旦外部的div#wrap是position:relative或者 position:absolute，那么div#content相对于div#wrap定位。就是把div#wrap的左上点当做(0,0)坐标，div#wrap（div#wrap的高度是height，宽度是width）的右下点当做（width,height）坐标。
