Web之路笔记之二 - CSS Positioning
CSS中控制各个Block element的位置方式之一，tag为position，有4种属性。
1. static
一般网页默认的属性，表示element根据页面正常流（normal flow）进行排列，也就是默认的摆放方式，所以一般不会在CSS文件内编写。
2. absolute
表示element从页面正常流中去除，本该所属的地方不会保留位置，并且相对于距离它最近的父元素（parent element）进行移动。比如说在body内的一个div设为absolute，那么移动的时候就是相对于body这个block进行移动；如果没有父元素，则根据html元素进行移动。
3. fixed
表示element从页面正常流中去除，本该所处的地方不会保留位置，并且相对于浏览器等视窗进行移动。需要注意的是，该元素不会因为页面滚动而移动，也就是对一个fixed的元素，无论你如何滑动滚轮，它不会从一开始看到他时候的地方移动一步。使用较少，本来以为可以用于固定背景图片，但是因为背景图片是在body元素下设置的，所以没办法单独对背景图片进行设置为fixed。
4. relative
此处说的relative相关，是与该element原来在页面正常流中本该所属的位置的相关，也就是说，如果只设置了position: relative而不对element的top等进行设置的话， 显示的效果和默认的static没有区别。另外，设置完四周参数之后的效果，尽管移动了位置，但是原本本该所属的地方仍然会留出空白，也就是说他仍然存在于页面正常流中。
需要注意的是，相关的element无论如何设置z-index也不能够置于static element之上；另外一点是limits the scope of absolutely positioned child elements，这句话仍需要继续理解。
另外，移出页面正常流fixed和absolute的element会覆盖其他positioned element，不希望覆盖的时候，使用z-index属性可以修改。
z-index性质是决定了一个element在栈内的顺序，越大的在上层。当两个element覆盖在同一个地方，在html越靠后的越先显示。需要注意的是，z-index只对除static以外的element起作用！也就是说如果和（默认）static元素相比，永远是static在上而且不能用z-index改变显示顺序。
参考：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
