position 定位
什么是定位?
浏览器在决定了每个元素的盒子尺寸之后,另一关键点就是如何为每个元素确定在文档中或屏幕窗口中的位置(坐标值)
有四种基本的定位机制：静态定位、相对定位、绝对定位、固定定位,可使用position属性进行设置
静态定位 static
<style>
#page{width:460px; margin: 0 auto; padding:10px;}
#page p{border:1px solid grey;}
</style>
<div id="page">
<h2>静态定位</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”...</p>
<div>
浏览器的默认定位方式，即按照html文档的代码顺序（即文档流）进行依次定位
相对定位 relative
<style>
#page{width:460px; margin: 0 auto; padding:10px;}
#page p{border:1px solid grey;}
#page img{position: relative;top:60px;left:60px;}
</style>
<div id="page">
<h2>相对定位</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”...</p>
<div>
先假设元素仍然按静态定位确定位置，然后以此位置为参考原点，根据设置的偏离值获得实际的位置,但所占空间仍然保留。并且可以其它元素重叠
换言之,如果你为元素设置了相对定位,但未设置偏离值,则该元素的显示和静态定位并无区别.但是,该元素的状态将变为已定位元素,可以成为绝对定位的参考原点.
绝对定位 absolute
<style>
#page{position:relative;width:460px;height:1000px; margin: 0 auto; border:1px solid red;}
#page p{border:1px solid grey;}
#page img{position: absolute;bottom:10px;right:10px;}
</style>
<div id="page">
<h2>绝对定位</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”...</p>
<div>
一旦设置绝对定位，该元素就好象被从文档流中删除，该元素也就将失去了在正常文档流中所占的位置与空间.
该元素的新位置将以距离其最近一个且不是静态定位的祖先元素为坐标原点进行偏移。并且将转型为一个块状盒子，而不论原来它在正常流中属于何种类型。
如果所有的祖先元素都是静态定位的，则默认为最顶层元素，即<body>或<html>
由于演示的需要，本例中刻意拉长了文档的高度，所以需要滚动页面后才能看到被绝对定位的头像。
绝对定位的用途
绝对定位之后，特别是对多个元素都进行绝对定位之后，文档将获得Z轴的视角，即相当于在原文档空间上方形成多个定位层。可以通过设置z-index属性，对这多个绝对定位后的元素给出z轴的排列顺序。
由于绝对定位的空间坐标值是绝对坐标,不受普通的元素限制，所以常常用于实现浮层窗口,广告条之类的效果。
固定定位 fixed
<style>
#page{width:460px;height:3000px; margin: 0 auto; padding:0;}
#page p{border:1px solid grey;}
#page img{position: fixed;bottom:60px;right:60px;}
</style>
<div id="page">
<h2>固定定位</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”...</p>
<div>
是绝对定位的一种变形，即其参考原点将是屏幕可视区域，而不是文档区域。常用来实现诸如顶部固定导航等效果。
文档区域的长宽度,是由文档的内容和样式设置共同决定的.而屏幕可视区域的高宽度则是物理屏幕及浏览器窗口的大小决定的
当文档区域的长度 > 屏幕可视区域的高度,会出现纵向滚动条
当文档区域的宽度 > 屏幕可视区域的宽度,会出现横向滚动条
浮动 float
<style>
#page{width:300px; margin: 0 auto; padding:0;} p{ border:1px solid grey;} h2{margin:0;padding:0;}
img {float:left;margin:1em;}
</style>
<div id="page">
<h2>浮动</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。其人爽朗大方，爱饮酒作诗，喜交友。李白深受黄老列庄思想影响，有《李太白集》传世...</p>
<div>
浮动严格讲不算是一种定位方式。它的最初用途是实现文字环绕的效果。如同绝对定位,元素将失去其在文档流中的位置和空间，重新按浮动的方向定位.与绝对定位不同的是，它位置坐标的参考原点或浮动范围只能是父元素，且不能与其它元素产生重叠,而是产生环绕的效果
对于块元素，浮动使得它们表现的像内联元素一样，漂浮起来，横向排列。这个特性将用于后文中的布局
注意示例中图片的上沿,完全与父元素边框重合,既使我们设置了margin-top也无效(只能用padding-top),这就是漂浮的特征.
未清除的浮动
<style>
#page{width:300px; margin: 0 auto; padding:0;} p{ border:1px solid grey;} h2{margin:0;padding:0;}
img {float:right;margin:1em;}
</style>
<div id="page">
<h2>浮动</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”...</p>
<h2>我的显示不正常,被上面浮动的图片压迫换行了</h2>
<div>
本示例改向右浮,尽管按代码顺序图片应在左边,但实际却漂浮到了右边(即以父元素的右边界为参考起点)
但下方的<h2>标题显示不正常,这是因为本示例刻意减少了<p>中的字数.使得#page元素的实际高度(正如示例效果中的边框所示)小于图片高度,而后续元素<h2>按静态定位紧随其后,但其右侧接触到已浮动的图片,从而产生了未期待的环绕效果
如果将<p>的字数增加,会发现显示又正常了,这是因为<p>元素的高度增加了,从而使后续元素不再接触到浮动的图片
清除浮动
<style>
#page{width:300px; margin: 0 auto; padding:0;} p{ border:1px solid grey;} h2{margin:0;padding:0;}
img {float:right;margin:1em;}
</style>
<div id="page">
<h2>浮动</h2>
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人...</p>
<div style="clear:right;"></div>
<h2>我是后面的标题，现在我的显示又正常了</h2>
<div>
本示例在<p>元素后增加了一个空的块元素,然后设置了一个清除属性,其效果相对于通知浏览器,将浮动元素的高度重新计入父元素的高度(注意示例中父元素的边框),即浪子回家了
定位小结
| 方式 |
坐标原点 |
偏移方式 |
空间重叠 |
| 静态 |
前一元素 |
无 |
不可重叠 |
| 相对 |
原定位位置 |
设计师指定 |
原空间仍保留,可与兄弟元素重叠 |
| 绝对 |
最新已定位的父元素 |
设计师指定 |
可与任何元素重叠,顺序由z-index设定 |
| 浮动 |
父元素 |
根据浮动方向自动计算,不能精确指定 |
不可重叠,遇见文本元素,则环绕 |
语法参考
深入阅读