内容1
内容2
内容3
现在这个就是内容4的位置，比如内容4是相对定位的，他就该出现在内容4这个位置。就是说这个位置是它的起点，如果将top设为40px那他就出先在它该出现的位置（内容4）顶部以下40px的地方。（我说的是上下排，你也可以想到左右排。一样的），相对位置是占空间的，因此移动他会覆盖其他框。
绝对定位它的位置和文档流无关且不占空间，这样普通流中的其他元素的布局（比如代码里内容4是绝对定位的）将内容4当做不存在，将内容5出现在内容4的位置，那么内容4呢？其相对最近以定位的父元素，这里说的内容4的父即body（dw里的层就是这个东西了，有些人就这样弄，结果浏览器尺寸变了，位置就不对了），正确的做法：绝对定位的元素它应在在一个父元素里，这个父元素须是有定位的且有布局（给个高度就可以了），用相对定位为例，
<div style="position:relative;height:100px;">
<div style="position:absolute;top:20px;"></div>
</div>
现在这个绝对定位的元相对他的父元素定位的了；
注意这个只在ie60以上才会相对他的父元素定位，其他浏览器也没问题，要在ie50以下这样，还须写些东西才可以，不写了，你自己慢慢研究吧。
div+css布局用绝对定位或相对定位一般比较少，特殊地方特殊用1、iPad内置MEMS加速计感应器，能获取设备相对于重力的倾斜角度。
2、iPad使用勾股定理解算三维空间中的重力向量和设备相对于地面的位置关系。
3、一旦iPad完成了高度测量，就可以通过屏幕上显示出当前设备与地面之间精确的垂直距离。
定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用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档案的内容如下：
效果如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）