CSS之position体验
1. position介绍
position最简单的理解就是元素位置的定位，该元素相对于其他元素的位置或者想要该元素出现在合适的位置。这里我们用一个简单的例子来解释一下position的使用
<style type="text/css">
*{margin:0; padding:0;}
.parent{width:100%; height:100%; background:#DDD;}
.aa{width:100px; height:100px; background:#00F; }
.bb{width:100px; height:100px; background:#F00; }
</style> <div class="parent">
<div class="aa">aa</div>
<div class="bb">bb</div>
</div>
很简单的代码，三个div没有任何的position属性，初始的效果是这样的：
2. relative
relative是‘相对的’的意思，那么他相对谁呢，答案是相对他自己，相对他本应该存在的位置进行偏移，而不是他的父级节点或兄弟节点。同时，relative属性不影响其父级节点域兄弟的任何属性，不会让他们产生任何的位移与宽度和高度的变化。
首先我们让aa的position为relative，parent和bb均不变。为aa添加的CSS属性有：{position:relative; top:50px; left:50px;}
，
现在我们看到的就变成这样子了，aa的top与left已经偏离了原来位置的50px，可是bb的位置一点也没有改变，完全不受影响。现在，我们也给bb添加上相同的CSS属性，看看是什么样的效果。
bb的位置也相对原来的位置偏移了50px，注意：是相对bb自己原来的位置，而不是相对于父级节点的位置。如果是相对于父级节点的位置的话，那么aa与bb就应该是重合的。现在又出现了新的问题：如果我们在偏移之后的aa添加上了margin属性怎么办，是按照margin的边界进行计算呢，还是按照现在的边界进行计算呢？试验告诉你，{position:relative; top:50px; left:50px;margin-left:10px;}：
虽然我们具体不知道他的数值，可是从比例上我们能够看到left的偏移量是按照margin的边界进行计算的。同时我们也可以将上面的那些情况理解为是{margin:0}的特殊情况。
如果给父级元素添加上position，会影响到aa, bb的位置变化么？现在我们给parent添加{position:relative}和{position:absolute}看看有什么效果。答案是aa和bb完全不受parent的position设置的影响，该是什么偏移还是什么偏移，只不过是给parent添加{position:absolute}时，parent会铺满整个窗口，其他的没有任何变化。
3. absolute
absolute，‘绝对地’，如果aa的position值为absolute时，会参照谁进行偏移呢？aa会按照DOM元素从内层向body一直找，直到出现某一元素有position属性（值为relative, absolte或fixed）或者到body，那么aa就会参照该元素进行偏移。也就是说，从离aa最近的父级元素开始查找position，如果当前的父级元素没有，那么就找父级的父级，直到出现position属性，如果一直没有出现position属性，aa就会参照body进行偏移。同时，{position:absolute}也会影响兄弟节点的定位，后面的节点会填充上该位置。
设置parent的CSS属性{position:relative; top:50px; left:50px;}
设置aa的CSS属性{position:absolute; top:50px; left:50px;}
我们从图片中能够看到：parent, aa, bb均发生了偏移。parent的position值为relative，那么他会参照他自己原来的位置top与left均偏移50px；aa的position值为absolute，向外层查找时，parent就有position属性，那么aa就会参照parent进行偏移；bb的位置到了parent内部的左上角。
如果把parent的position值更改为absolute或者fixed，aa与bb会有同样的效果。也就是说，某元素只是寻找所有父级元素中是否有position值（relative, absolute或fixed），而不关心她具体是什么值，而且是按照离该元素最近的父级元素进行偏移。
现在我们把页面的结构弄的复杂一点，给parent添加一个兄弟节点parent2和父级节点grandpa，grandpa有一个兄弟节点grandpa2：
<body>
<div class="grandpa2"> </div>
<div class="grandpa">
<div class="parent2">
parent2
</div>
<div class="parent">
<div class="aa">aa</div>
<div class="bb">bb</div>
</div>
</div>
</body>
新的CSS属性如下，两个grandpa节点的边框是红色的：
<style type="text/css">
*{margin:0; padding:0;}
.grandpa{border:1px solid red;}
.grandpa2{width:100%; height:100px; border:1px solid red;}
.parent{width:100%; height:100%; background:#DDD;}
.parent2{width:100px; height:100px; background:#BBB;}
.aa{width:100px; height:100px; background:#00F; }
.bb{width:100px; height:100px; background:#F00; }
</style>
搞得这么复杂就是为了证明{position:absolute}的参照点是什么。上面的那个例子已经证明如果最近的父级节点有position属性的话，就会参照最近的父级节点，如果该父级节点没有，而二级父级节点有呢。给aa添CSS属性{position:absolute; top:50px; height:50px;}，给grandpa添加CSS属性：{position:relative;}，
，
下面的红色边框是grandpa，上面的红色边框是grandpa2，可以看到aa是以grandpa进行偏移的。
现在我们把刚才给grandpa添加的CSS属性{position:relative}去掉，
，
aa在寻找了parent和grandpa之后依然没有position属性，于是只能以body的左上角作为参照点了。
这里依然有一个同样的问题：如果父级元素有margin和padding会怎么办？答案是aa元素会参照{padding-left:0; padding-top:0;}进行偏移。
现在父级元素既有margin又有padding，从图片中可以看出，aa会忽略掉padding的值，按照{padding-left:0; padding-top:0}的基准点进行偏移。
4. fixed与static
当某一元素的position属性为fixed时，不管该元素的父级元素是否有position属性，它总是以浏览器窗口的左上角进行定位（说按body进行定位其实不准确，当给body添加margin和padding属性时，该元素的位置依然没有变化）。
我在某一篇文章中看到这样的一句话“fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位”，我当时还以为如果给body添加margin属性会影响元素的定位。试验后才知道，fixed是以浏览器窗口进行定位的，而不是以body进行定位的。
static是position的默认属性值，如果不给元素设置其他的属性值，元素就会按照正常的文档流进行排列。
5. 总结
真是不写不知道，一写吓一跳。原本很模糊的东西，通过试验并加以总结，会变得如此清晰。只能说看别人的东西，如果不加以实践的话，过去就忘了，而且还依然是浑浑噩噩的状态。
本人才疏学浅，如果有哪里不正确的地方，欢迎指正。
CSS之position体验的更多相关文章
- 最容易理解的CSS的position教程——十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- WTF Forms – 使用 CSS 实现用户体验更好的表单
WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- CSS的position设置
CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
随机推荐
- 008-Shell 流程控制
一.if else 1.1.if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): ]; ...
- 15.遇到window leaked的解决方法
遇到这个可能是android:configChanges没有配置好 可以试试配置为这个 mcc|mnc|locale|touchscreen|keyboard|keyboardHidden|navig ...
- 主成分分析PCA学习一条龙
转自:https://yoyoyohamapi.gitbooks.io/mit-ml/content/%E7%89%B9%E5%BE%81%E9%99%8D%E7%BB%B4/articles/PCA ...
- django 使用form验证用户名和密码
form验证可以减少查询数据库,所以代码先预先验证,有问题可以返回给前端显示 1.在users文件夹下新建forms.py文件,用来验证用户名和密码是否为空,密码长度是否大于6 # -*- codin ...
- Vim插件：Unite新手指导(译)
Unite是什么? Unite可以在一个项目中快速浏览文件.但是它不仅限于文件,其他任何可以列出的东西都可以很好的被显示和搜索.这个开放式的特性很可能是人们找到它的原因(原文:This open-en ...
- 『NiFi 学习之路』简介
『NiFi 学习之路』简介 『NiFi 学习之路』入门 -- 下载.安装与简单使用 『NiFi 学习之路』资源 -- 资料汇总 『NiFi 学习之路』把握 -- 架构及主要组件 『NiFi 学习之路』 ...
- 2018秦皇岛ccpc-camp Steins;Gate (原根+FFT)
因为给定的模数P保证是素数,所以P一定有原根. 根据原根的性质,若\(g\)是\(P\)的原根,则\(g^k\)能够生成\([1,P-1]\)中所有的数,这样的k一共有P-2个. 则\(a_i*a_j ...
- [转]Ubuntu使用Wireshark找不到interface的解决方法
Wireshark是一款强大的有图形界面的网络封包分析工具. dumpcap需要root权限才能使用的,以普通用户打开Wireshark,Wireshark当然没有权限使用dumpcap进行截取封包. ...
- Unity状态机的实现，以《塔防》为例
什么是有限状态机? 通俗点讲,有限状态机是:将对象的状态(攻击.闲置.晕眩)的实现代码,提取出来,封装成状态.由状态机负责在各个状态之间调度. 对象持有状态管理类(状态机)的引用,与具体的状态解耦. ...
- Windows 配置安卓环境变量
变量名:JAVA_HOME 变量值:JDK 路径 变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\toos.jar // ...