摘要：
这是艺灵带你轻松学会div+css的第十一节课：position定位属性。这节主要讲position属性的四个值如何使用及有什么样的效果，课堂中会做一些相应案例来提高同学们对知识点的理解与掌握......

第十一节：position定位属性

1、课前小叙

在上一节的课程 轻松学会div+css10练习css浮动布局 中，我们主要做了两个与浮动有关的案例，让同学们感受到浮动的作用与重要性。今天我们再来讲另一个比较强大的知识点：position定位属性，浮动与这个相比，差的可不是一个级别！我们闲话少说，开始上课喽！

2、定位应用

网页中常用的轮播上面的箭头、文字；鼠标滑过特效中的半透明遮罩层；页面中悬浮的楼层锚点等，我们常用定位实现这些。配图一张：

3、定位属性

在手册中，定位属性的语法格式为：position : static | absolute | fixed | relative ；共有四个侯选值。分别是这样解释的：
static :默认值。无特殊定位，对象遵循HTML定位规则
absolute :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

估计很多同学都不能理解手册中讲的是什么鬼。下面以配图和demo的形式进行解说，希望同学们可以理解。

4、position:relative

相对定位：position:relative。
顾名思义，此属性是有一个参照物的。在学物理的时候，会提到参照物和相对运动等概念，此处也差不多。

参照物是什么呢？

如果页面中只有一个元素，那参照物就是浏览器左上角，注意标红的文字！如果有元素了，参照物就是前一个元素。接下来我们将用案例来一步步演示给同学们看。

4.1、html代码

<div>一个正常的div</div>
<div>一个正常的div</div>
<div>一个正常的div</div>

4.2、css样式

<!--嵌入式样式表-->
<style type="text/css">
/*简单页面重构*/
*{margin:0;padding:0;}
/*添加边框属性，便于前台页面看效果*/
div{
　border:1px solid #f00;/*边框=宽1像素，实线，红色*/
　width:200px;/*宽度=200像素*/
　height:100px;/*高度=100像素*/
}
</style>

此时的效果这这个样子的，配图一：　

接下来我们添加position:relative看下效果。

4.3、修改html代码

<div class="relative">这是一个div，设置了相对定位属性(relative)，由于我前面没有元素，所以以浏览器左上角开始计算位置。</div>
<div>一个正常的div</div>
<div class="relative">这是一个div，设置了相对定位属性(relative)，由于我前面有元素，所以以前一个元素为参照物并计算位置。</div>

4.4、新增css

<style type="text/css">
.relative{
　position:relative;/*相对定位*/
}
</style>

此时的效果这这个样子的，配图二：　好像没什么作用嘛！别急，我们添加方位值试试。

4.5、新增css

<style type="text/css">
.relative{
　position:relative;/*相对定位，配合方位值后效果更加明显*/
　left:30px;/*距离左边=30像素*/
　top:10px;/*距离上边=10像素*/
}
</style>

配图三：　为了便于观察，我们来看下图一、图二、图三的对比图：　

对应demo：点我看全屏demo展示

提醒：如果您给第二个div添加了其它属性，例如：浮动，那么后面的div的起始点就不一定是右下角了哦！具体情况，具体分析。

5、position:absolute

绝对定位：position:absolute。
这个会脱离正常的文档流。当此元素的父级没有设置position属性时，以浏览器左上角为参照点进行计算位置；当此元素的父级设置了position属性并且值不为static时，以最近的父级左上角为参照点计算位置。

什么是正常的文档流？

如上面的配图一，元素从上向下，各自占各自的位子，各自有各自固定的空间大小，不耍流氓也不霸道，这就是正常的文档流布局。

如何脱离文档流呢？请看案例。

5.1、html代码

<div class="absolute">这个div设置了绝对定位属性(absolute)，由于我前面没有元素，所以以浏览器左上角开始计算位置。</div>
<div>一个正常的div</div>
<div class="absolute">这个div设置了绝对定位属性(absolute)，虽然我前面有元素，但仍以浏览器左上角开始计算位置。</div>

5.2、css样式

<!--嵌入式样式表-->
<style type="text/css">
/*简单页面重构*/
*{margin:0;padding:0;}
/*添加边框属性，便于前台页面看效果*/
div{
　border:1px solid #f00;/*边框=宽1像素，实线，红色*/
　width:200px;/*宽度=200像素*/
　height:100px;/*高度=100像素*/
}
.absolute{
　position:absolute;/*绝对定位*/
}
</style>

效果配图四：　同学们，懵了没？3个div，现在变成两个，就这么神奇。

原因：前面说了，绝对定位的元素会脱离正常的文档流。说白了，绝对定位的元素不占原来自己的空间！这货会遁术，明白了吗？

此时应该很好理解为什么看到的是两个div了吧。由于第一个div是绝对定位，所以先忽略他的位置，下面第二个正常的div会向上进行替补，然后占据第一个div的位置，第三个div同时也会向上替补，占了原来第二个div的位置。

下面的一段解释新增于2016-07-02 22:25

有小伙伴反应上面5.1，5.2的例子看不明白，这里需要解释一个问题：定位的元素，如果不设置方向值，即：top或right或bottom或left时，top的值是auto也就是默认的。上面第二个div是正常的，第三个div的top是auto，所以会在第二个位子。如果原来的第二个div去掉了，那么第三个定位的div就会与第一个进行重合（因为第一个是定位，不占空间，所以第三个会重合第一个）。同理：如果定位的第三个div前面有n个正常元素时，那么定位的第三个div会在第n+1的位置。

为了更好的看到第一个div到底在哪里，我们可以设置方位值。

5.3、新增方位值

<style type="text/css">
.absolute{
　position:absolute;/*绝对定位，配合方位值，效果更明显！*/
　left:30px;/*距离左边=30像素*/
　top:30px;/*距离上边=30像素*/
}
.absolute1{
　position:absolute;/*绝对定位，配合方位值，效果更明显！*/
　left:30px;/*距离左边=30像素*/
　top:150px;/*距离上边=150像素*/
}
</style>

配图五：　

对应demo：点我看全屏demo展示

提醒：当绝对定位元素的父级设置了除static外的值时，该定位元素会以最近的一个父级左上角为起点进行计算位置。

6、position:fixed

通常说的悬浮：position:fixed。这个也会脱离正常的文档流且始终以浏览器左上角为参照点计算位置！

6.1、html代码

<div>一个正常的div</div>
<div class="fixed">这个div设置了悬浮(fixed)，不管前面有没有值或父级有没有值，全都无视！仍以浏览器左上角开始计算位置！！！拉动滚动条可看到明显效果！</div>

6.2、css样式

<!--嵌入式样式表-->
<style type="text/css">
/*简单页面重构*/
*{margin:0;padding:0;}
body{height:2000px;}/*为了让页面出现滚动条，下拉时便于看效果*/
/*添加边框属性，便于前台页面看效果*/
div{
　border:1px solid #f00;/*边框=宽1像素，实线，红色*/
　width:200px;/*宽度=200像素*/
　height:100px;/*高度=100像素*/
}
.fixed{
　position:fixed;/*悬浮*/
}
</style>

效果配图六：　同学们，拉滚动条时会看到第二个div始终固定在原地不动，这个就是我们的悬浮。

对应demo：点我看全屏demo展示

7、position:static

这个平时不怎么用，一般用到时是为了覆盖其它的效果。我们来做一个完整的例子，使用position:static来覆盖前面的所有效果。

7.1、html代码

<div class="relative static">我本来是相对定位(relative)的，但由于添加了static后，我会失去原有的功能</div>
<div>一个正常的div</div>
<div class="absolute static">我本来是绝对定位属性(absolute)，由于添加了static后，我被打回了原形，现在恢复正常的文档流。</div>
<div class="fixed static">我本来是悬浮(fixed)，但现在也被打回原形，遵循正常的文档流布局了</div>

7.2、css样式

<!--嵌入式样式表-->
<style type="text/css">
/*简单页面重构*/
*{margin:0;padding:0;}
body{height:2000px;}/*为了让页面出现滚动条，下拉时便于看效果*/
/*添加边框属性，便于前台页面看效果*/
div{
　border:1px solid #f00;/*边框=宽1像素，实线，红色*/
　width:200px;/*宽度=200像素*/
　height:100px;/*高度=100像素*/
}
.relative{
　position:relative;/*相对定位，配合方位值后效果更加明显*/
　left:30px;/*距离左边=30像素*/
　top:10px;/*距离上边=10像素*/
}
.absolute1{
　position:absolute;/*绝对定位，配合方位值，效果更明显！*/
　left:30px;/*距离左边=30像素*/
　top:150px;/*距离上边=150像素*/
}
.fixed{
　position:fixed;/*悬浮*/
}
.static{
　position:static;/*恢复默认*/
}
</style>

效果配图七：　从图中可看出：之前的相对定位relative、绝对定位absolute、悬浮fixed全都变乖了，回到了正常文档流中。

对应demo：点我看全屏demo展示

虽然上面的这些案例比较简单，但也不要大意！关于position的坑还有很多，同学们在以后的学习或工作中会慢慢体会到。这节课就到此结束，同学们下去后一定一定一定要多做练习！

8、录制视频

标题：艺灵带你轻松学会div+css11position定位属性

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/39649261.swf
优酷：http://player.youku.com/player.php/sid/XMTU5NjAzNjk5Ng==/v.swf
土豆：http://www.tudou.com/v/z3Az7nhVwNY/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=t0304gj4b0q&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-06-08/413.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。