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