轻轻松松学CSS:position
position属性表示元素的定位类型，在CSS布局中，position发挥着非常重要的作用，一些元素的布局就是用position完成的，鉴于此，本文结合一些小实例详细讲解一下。position属性在通常情况下有4个可选值，分别是：static、fixed、relative、absolute。（还有第5个属性sticky，因部分浏览器可能还不支持，本文暂不介绍）一、static默认值，因为实际设计网页的时候“用不着”，所以不做介绍。（你如果很好学，可以随便在网上搜一下，一搜就一大把，一般我们遇到一大把的解答就抓狂，似是而非的说法一大堆向你扑面而来，一定搞得你懵圈，但是我要负责地告诉你这个不会，随便看一个人的解答，他都会讲得清楚明白，几乎每个人讲解的核心意思都是：这是“默认值”，实践中几乎用不到，对很多人来说懂与不懂一个样！呵呵，这下你坦然了吧！）fixed、relative、absolute好像性格不同的三个人物，掌握了三个人物的性格特点基本，就掌握了这块知识。我尽可能用最通俗、最形象的语言来描述他们，让读者在轻松快乐中学习。二、fixed轻松调侃完static之后，紧接着就聊fixed。在之前查阅的资料中，没有（几乎没有）马上就介绍fixed的，一般都是static-relative-absolute-fixed这样的顺序，fixed排在最后。我不随波逐流，我觉得fixed特立独行，他是野孩子，他不受祖制约束（不是“组织约束”，但他确实也不受“组织约束”），桀骜不驯。没有家长的管教，他无组织、无纪律，是典型的独行侠，因此学习他就相对简单（“相对简单”是指在html、css中牵扯因素少），先学简单的符合读者的认知规律。现在，读者对fixed还没有一个具体的感知，先举个简单的例子-浮动广告，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>悬浮广告</title> 6 <style> 7 .content1{ 8 height:1500px; 9 background:#ccc;10 }11 .content2{12 height:2000px;13 background:#ddd;14 }15 16 .guanggao{17 position:fixed;18 top:100px;19 right:80px;20 }21 </style>22 </head>23 <body>24 <div class="content1">25 这是网站第一部分内容，右上角是悬浮广告，top和right的值都是相对浏览器窗口的位置26 </div>27 <div class="guanggao">28 <img src="img/guanggao.jpg">29 </div>30 <div class="content2">31 这是网站第二部分内容，浮动广告脱离文档流，所以它就和网站第一部分内容紧挨着了32 </div>33 </body>34 </html>悬浮广告 Code悬浮广告是固定定位（position：fixed），他脱离了文档流，在html安排顺序中，悬浮广告（<div class=”guanggao”><img src=”…”></div>）本来的位置是在，第一部分内容（<div class=”content1”>…</div>）与第二部分内容（<div class=”content2”>…</div>）之间的，因为他脱离了文档流，第一部分内容和第二部分内容就当他不存在一样，两个块元素（block）紧挨在一起。浮动广告只相对于浏览器窗口定位，和position：fixed配合的偏移属性top:100px,right:80px都是相对于浏览器窗口来说的，效果图如下：
fixed叫“固定定位”,读者运行代码后应该能体会出，悬浮广告总是相对浏览器窗口保持top=100px,right=80px不动，滚动条怎么滚动都改变不了他的位置。为了更加有力地说明固定定位不受祖制约束，请把上边地代码调整一下，把悬浮广告（<div class=”guanggao”><img src=”…”></div>）放在第一部分内容中或者是第二部分内容中，在此以放在第一部分内容中为例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>悬浮广告2</title> 6 <style> 7 .content1{ 8 height:1500px; 9 background:#ccc;10 }11 .content2{12 height:2000px;13 background:#ddd;14 }15 16 .guanggao{17 position:fixed;18 top:100px;19 right:80px;20 }21 22 </style>23 <script>24 25 </script>26 </head>27 <body>28 <div class="content1">29 这是网站第一部分内容，右上角是悬浮广告，top和right的值都是相对浏览器窗口的位置30 <div class="guanggao">31 <img src="img/guanggao.jpg">32 </div>33 </div>34 <div class="content2">35 这是网站第二部分内容，浮动广告脱离文档流，所以它就和网站第一部分内容紧挨着了36 </div>37 </body>38 </html>悬浮广告2 Code运行效果和上面的第一段代码完全一样，故而不附效果图了。他完全不受第一部分内容的约束（不受祖制的约束），运行后他的偏移属性（top、right）都是相对浏览器窗口来说的，他的位置跟第一部分内容一点关系都没有。各位读者，我说明白了吗？下面再举个稍微复杂点（因为有jquery）的例子-遮罩遮罩的应用广泛，一般用于凸显一部分内容同时也就淡化其他内容，比如注册、登录、新增表单、修改表单等，这里以登录为例（注册、新增表单、修改表单跟登录道理类似）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>遮罩</title> 6 <script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script> 7 <style> 8 .fixed{ 9 position:fixed;10 width:100%;11 height:100%;12 left:0;13 top:0;14 display:none;15 background:rgba(0,0,0,0.5);16 }17 18 .login{19 position:absolute;20 top:50%;21 left:50%;22 width:300px;23 display:none;24 margin-top:-200px;25 margin-left:-150px;26 border:1px solid #ccc;27 padding:60px 40px;28 background:orange;29 border-radius:20px;30 }31 32 .login p{33 text-align:center;34 }35 .login p input{36 width:78%;37 height:40px;38 background:#ccc;39 border-radius:5px;40 }41 #submit{42 margin-top:80px;43 height:50px;44 }45 46 </style>47 <script>48 $(function(){49 $('button').click(function(){50 $('.fixed').css('display','block');51 $('.login').css('display','block');52 });53 $('#submit').click(function(){54 $('.fixed').css('display','none');55 $('.login').css('display','none');56 })57 })58 </script>59 </head>60 <body>61 <button class="button">登录</button>62 <div class="fixed"></div>63 <div class="login">64 <p><input type="text" placeholder="请输入用户名"></p>65 <p><input type="password" placeholder="请输入密码"></p>66 <p><input id="submit" type="button" value="登录"></p>67 </div>68 </body>69 </html>遮罩 Code点击下图中的“登录”按钮
此时，出现登录框，并且在登录框周围有遮罩效果（遮罩：凸显登录框，淡化周围元素。出现登录框和遮罩需要用到js或jQuery知识，这些知识不在本文讨论的范围之内）
点击上图登录框中的“登录”按钮，遮罩消失。（这里也用到js或jQuery知识）因为遮罩应用较多，所以把上边的代码解释一下：遮罩（<div class=”fixed”></div>）需要把整个屏幕遮罩住，所以定位在top=0,left=0,并且全屏宽（width：100%）、全屏高（height：100%），为了不使下面的元素完全看不见，设置了透明度为0.5，background:rgba(0,0,0,0.5)背景是黑色，透明度为50%。有的读者注意到登录框（<div class=”login”>…</div>）也是固定定位（<style> .login{position:fixed;…} … </style>），其实他也可以设置为absolute，如果没有设置登录框的position属性就无法保证登录框显示在遮罩之上（这涉及到定位元素的堆叠顺序的知识，因不是本文重点，故而点到为止）这么一看，好像fixed也不简单呀。其实，悬浮广告还是非常好理解的，遮罩需要点js或jQuery知识，这样就增加了一点难度，但是对读者（要有一点点html、css基础，我的文章主要面对这样的读者）来说，努力一下应该能够克服，毕竟为了实现自己的理想，为了技术上有所提高，这样的难度应该不是大事。退一步说，遮罩你理解不了，悬浮广告总能理解吧？能理解这一关也算勉强通过了。下一关，让我们见识见识relative，他又是怎样的一个人呢？三、relative请读者先看下面这段代码，为了增加读者阅读代码的愉悦感，先从最简单、最基本的入手。以下的代码非常简洁，只有Box2设置了定位属性（position：relative），其他元素均未设置定位属性，这样就简化了问题，便于读者理解。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_Box2</title> 6 <style> 7 div{ 8 width:100px; 9 height:100px;10 11 }12 #Box2{13 position:relative;14 left:20px;15 top:50px;16 background:orange;17 }18 #Box1{19 background:green;20 }21 #Box3{22 background:blue;23 }24 </style>25 </head>26 <body>27 <div id="Box1">Box1</div>28 <div id="Box2">Box2</div>29 <div id="Box3">Box3</div>30 </body>31 </html>relative Code效果图如下：
relative是相对定位，相对谁定位呢？相对于自己，确切地说是相对于自己偏移之前（图中虚线框就是Box2原本的位置）。别人的定位基准是html/body，或是祖辈，relative也挺个性，是个自恋狂，他以自我为中心，只和自己定位前的位置比较，未设置position：relative时在哪个位置，设置position：relative后的位置就和未设置时比较，进行偏移。Box2就相对于虚线框位置进行偏移。（position：relative当然要配合使用偏移属性top、left、right、bottom等，如果没有偏移属性配合使用，光有position：relative，跟没有设置position是一样的，瞎子点灯——白费蜡）。读者发现一个问题没有？relative他虽然偏移了，但原来的位置还在那儿，Box1和Box3是不能挤占的，灵魂虽然走了，但躯体还在那儿，有点像单位里吃空饷的，拿着工资，办公桌还在那儿摆着，就是没见他上过班。这些让我想起了一个成语“尸位素餐”！下面，举个relative应用的例子读者在点击导航栏上的菜单时，可能会遇到超链接发生稍许偏移的情况，这是因为这种效果能和用户有个交互，增加用户体验。代码很简单，如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_a</title> 6 <style> 7 li{ 8 display:inline-block; 9 margin:0 20px;10 }11 li:hover{12 position:relative;13 top:10px;14 left:6px;15 }16 </style>17 </head>18 <body>19 <ul>20 <li><a href="#">首页</a></li>21 <li><a href="#">新闻</a></li>22 <li><a href="#">联系我们</a></li>23 <li><a href="#">关于我们</a></li>24 </ul>25 </body>26 </html>relative_a Code效果图如下：
这个例子，读者理解吗？如果理解了，请往下看另一个例子——阴影效果，这个例子也不难
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_shadow</title> 6 <style> 7 div.shadow{ 8 background:#ccc; 9 float:right;10 }11 12 img{13 position:relative;14 left:-5px;15 top:-5px;16 17 border:1px solid #465B68;18 padding:6px;19 background:#fff;20 width:208px;21 height:151px;22 }23 </style>24 </head>25 <body>26 <div class="shadow">27 <img src="img/guanggao.jpg">28 </div>29 </body>30 </html>relative_shadow Code效果图如下：
div的背景是灰色，照片本来是和它重叠的，看不到背景，可是照片相对定位（relative）后，（相对自己原来的位置）向左偏移5px，向上偏移5px，由于它未脱离文档流，它的躯壳还在原来的位置不动，并且露出了div的背景，这样就形成了阴影效果。读者可能感觉出relative个性鲜明，只和自己比较，应该是最简单的呀！可以这么理解，但是relative不总是唱独角戏，他有时和absolute联袂出演，所以，读者还是先对absolute有个了解吧。四、absoluteabsolute是绝对定位，读者先看一段代码（凡是让读者上来就看一段代码，而不是讲解知识点然后再看代码，都是因为代码很简单，并且需要借助于代码说明问题，所以，读者尽管放心，不要一上来看到的是代码就有畏难情绪，以为代码比文字更费解，恰恰相反，这种情况下，代码一定很简单，我写文章尽量不给读者设置阅读障碍）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>absolute_Box2</title> <style> body{ background:gray; height:5000px; } .wrap{ border:2px solid blue; } #Box1,#Box3{ height:200px; background:orange; border:1px dashed red; } #Box2{ position:absolute; bottom:100px; right:200px; background:orange; border:1px dashed red; } </style> </head> <body> <div class="wrap"> <div id="Box1">Box1</div> <div id="Box2">Box2</div> <div id="Box3">Box3</div> </div> </body></html>absolute_Box2 Code效果图如下：
这段代码和relative第一段代码差别不是很大，这段代码只有Box2设置了定位属性（position：absolute），其他元素均未设置定位属性，这是为了简化问题，防止其他因素干扰，实际情况中未必这样，有时absolute和其他定位属性的值（比如：relative）可能同时出现，这是本文后面要讨论的，后面再说。在这个前提条件下（上段文字中的“只有Box2….，其他元素均未….”），注意前提条件，本段的结论，如果脱离前提条件，就不成立了。在此，提示读者这一点。Box2设置了绝对定位，他的偏移属性（例如本例中bottom：100px，right：200px）是相对浏览器窗口来说的。（再次说明，在满足本段的前提条件下，结论才成立。后面会讲到前提条件变了，偏移属性就不再相对于浏览器窗口来说了。本段提到 “前提条件”有5次之多！）absolute脱离了文档流（这一点和谁相像，对——是fixed），absolute（fixed）不在这个单位上班，调走了，就不在这个单位领工资了，更没有他的办公桌了，relative吃空饷，摆办公桌也不上班，灵魂走了，躯壳还在（占位）。这是absolute和fixed的相同点，同时也是absolute（fixed）和relative的区别。absolute在满足“前提条件”（就是“只有Box2…,其他元素均未…”那个前提条件）时和fixed相同，偏移属性相对于浏览器窗口来说的。有的读者问了，这么说fixed和absolute几乎完全一样了？确实，相同的地方很多，但不同的地方还是有的，比如，在滚动条滚动时，fixed在浏览器窗口中是不动的（fixed，固定不动的意思），absolute是随着滚动条滚动的。读者可以往回看，对比一下悬浮广告和满足“前提条件”下的Box2，就明白这一点了。当然，absolute和fixed还有其它不同，读者在继续学完absolute后就知道了。前面讲到absolute的那段代码（“前提条件”Box2那段），很简洁，当时是为了说明问题方便，实际情况下，在整个代码段中，absolute往往不是自己出现，经常和别的定位值一起使用，更多的时候是和relative一起出现。还记得在relative的最后那句话吗？——“relative不总是唱独角戏，他有时和absolute联袂出演”。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_Box2</title> 6 <style> 7 body{ 8 background:gray; 9 height:5000px;10 }11 .wrap{12 border:2px solid blue;13 position:relative;14 }15 #Box1,#Box3{16 height:200px;17 background:orange;18 border:1px dashed red;19 }20 #Box2{21 position:absolute;22 bottom:100px;23 right:200px;24 25 background:orange;26 border:1px dashed red;27 }28 </style>29 </head>30 <body>31 <div class="wrap">32 <div id="Box1">Box1</div>33 <div id="Box2">Box2</div>34 <div id="Box3">Box3</div>35 </div>36 </body>37 </html>relative-absolute_Box2 Code上面的代码里既有relative，也有absolute，还是Box2，只是外面的包裹器（class=“wrap”）多了一个定位属性（position：relative）。为了说明问题，在不改变代码含义前提下，稍微修改一下，结构可以描述成这样的：<div class=”wrap” style=”position:relative”>…<div id=”Box2” style=”position:absolute”>Box2</div>…</div>这样relative-absolute联袂出现了，而且还是父子关系（当然不仅限于父子关系，也可以推广到爷孙关系等…）效果图如下：
此时，Box2（position：absolute）的偏移属性（right：200px；bottom：100px）是相对于父元素（确切的说是：有static以外定位的祖辈元素）来说的。absolute有祖辈了（一般情况下祖辈是relative），有家长的孩子不再是野孩子了，出去玩玩可以，但是得在家长的附近玩，得到家长的宠爱，同时也受到家长的约束。这时，读者想到fixed了吗？这个可怜的孩子，一出生就走入社会，没有家长的宠爱，当然也没有家长去约束他。这也是absolute和fixed的区别，到最后，我们再好好总结一下relative、absolute、fixed的异同点。absolute的家长有个正规的名字叫“包含框”，通俗的说就是“定位基准”，偏移属性的值都是相对于包含框（定位基准）来说的。relative-absolute应用的第一个例子——提示框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_tip</title> 6 <style> 7 .tip{ 8 position:relative; 9 color:red;10 cursor:pointer;11 }12 .tip:hover span{13 position:absolute;14 top:30px;15 left:-30px;16 17 display:block;18 width:100px;19 background:#424242;20 color:#fff;21 padding:10px;22 }23 .tip span{24 display:none;25 }26 </style>27 </head>28 <body>29 <p>30 Web前端知识包括：31 <span class="tip">32 CSS33 <span>CSS 指层叠样式表 (Cascading Style Sheets),它是网页外观表现样式</span>34 </span>、35 <span class="tip">36 Html37 <span>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言</span>38 </span class="tip">、39 <span class="tip">40 JavaScript41 <span>JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备</span>42 </span>43 </p>44 </body>45 </html>relative-absolute_tip Code效果图如下：
提示框（position：absolute）是相对于父元素（position：relative）来定位的。relative-absolute应用的第二个例子——悬浮出现二级子菜单
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_zicaidan</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0;10 }11 .nav{12 background:blue;13 color:#fff;14 }15 .nav span{16 display:inline-block;17 padding:30px 50px;18 }19 li{20 list-style:none;21 }22 23 .zicaidan{24 position:relative;25 cursor:pointer;26 27 }28 .zicaidan ul{29 display:none;30 background:#000;31 }32 .zicaidan ul li{33 padding:30px;34 }35 .zicaidan ul li:hover{36 background:#aaa;37 color:red;38 }39 .zicaidan:hover ul{40 position:absolute;41 top:80px;42 left:10px;43 display:block;44 45 }46 </style>47 </head>48 <body>49 <div class="nav">50 <span>首页</span>51 <span class="zicaidan">52 新闻53 <ul>54 <li>新闻1</li>55 <li>新闻2</li>56 <li>新闻3</li>57 <li>新闻4</li>58 </ul>59 </span>60 <span class="zicaidan">61 联系我们62 <ul>63 <li>联系方式1</li>64 <li>联系方式2</li>65 <li>联系方式3</li>66 </ul>67 </span>68 </div>69 </body>70 </html>relative-absolute_zicaidan Code效果图如下：
悬浮出现二级子菜单和提示框道理上基本差不多，不再赘述。好了，到了该总结总结的时候了，我先陈述一下每个人的特点，穿插着他们的异同点，最后用一个表格简单整理一下。fixed,一出生就被家长抛弃了，他是野孩子，无拘无束，他脱离文档流，悬浮在一般元素之上，他在与不在对别人来说都一样，没啥影响。他的偏移属性值是相对于浏览器窗口来说的，也就是他相对于浏览器窗口固定，他不随滚动条一起滚动。典型应用，悬浮广告、遮罩。relative是自恋狂，偏移属性值是相对于他在正常情况下来说的，他自己和自己比较。偏移后堆叠在一般元素之上，他原来的位置还在那儿占着，占着办公桌还不上班，吃空饷。典型应用，阴影效果（relative单独使用）。absolute如果没有家长（没有家长：所有祖辈元素均没有static以外的定位），他就和fixed很像，脱离文档流，悬浮于一般元素之上，他在与不在对别人来说都一样，没啥影响。他的偏移属性值（top、right、bottom、left简称：TRBL 上右下左）是相对于浏览器窗口来说的，也就是他相对于浏览器窗口固定，他随着滚动条一起滚动（这是他和fixed的区别）。absolute更多的时候是有家长的，家长一般就是relative，relative-absolute组合使用，这是的absolute就不再相对浏览器窗口定位了，而是相对于父元素（relative）定位，有了家长的孩子不再满世界撒野，而是在家长的管束下，但他仍然脱离文档流，不和一般的元素争抢位置，一般元素就当他不存在一样，他堆叠在一般元素之上。典型应用，提示框和悬浮出现二级子菜单。position的主要可选值是否脱离文档流是否随着滚动条滚动定位基准应用fixed是否浏览器窗口悬浮广告、遮罩relative（单独）否是自己在正常情况下的位置超链接错位、阴影效果absolute（单独）是是浏览器窗口应用不多relative-absolute（组合）下的absolute是是定位的直系祖辈元素（此时的定位基准也叫“包含框”）提示框、悬浮出现二级子菜单注：relative-absolute（组合）在通常情况下，relative作为“定位父元素”。先解释一下“父元素”确切的说应该是直系祖辈元素，各种资料说法不一，但表达的意思都是一样的，本文有时叫“父元素”，有时也叫“祖辈元素”，有时还叫“直系祖辈元素”，读者不用纠结叫法，知道它的涵义就可以了。再解释一下“定位”，是指该元素的定位属性值是除static以外的值，更多的时候是position:relative，所以本文直接写成“relative-absolute”。鉴于个别内容不便于文字表达，本人计划于近期在视频学习网站发布关于position的相关视频，内容较之本文稍有拓展，届时，我会将视频链接发布于此。读者如有兴趣，敬请关注。