CSS定位元素--定位

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。 position 属性有 4 个值： static、relative、absolute、fixed，默认值为 static。

静态定位

static，默认展示的文档流就是

相对定位

relative，相对的是它原来在文档流中的位置（或者默认位置）。接下来，可以使用 top、 right、bottom 和 left 属性来改变它的位置了。但多数情况下，只用 top 和 left 就可以实现我们想要的效果。

绝对定位

absolute，绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来。

可以看到元素之前占据的空间被“回收了”。这说明，绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素 body 在定位。而这自然而然就引出了一个关于定位的重要概念：定位上下文。

固定定位

fixed，从完全移出文档流的角度说，固定定位与绝对定位类似。

--但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。

--就是说固定定位是展示在窗口的固定位置，不随下拉而上移或下动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。

--定位上下文

--绝对定位元素默认的定位上下文是 body。这是因为body 是标记中所有元素唯一的祖先元素。而实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的 position 设定为 relative 即可。

--显示属性

把块级元素变成行内元素（或者相反）的方法如下。

/*默认为 block*/
p {display:inline;}
/*默认为 inline*/
a {display:block;}

--display 属性还有一个值有必要提一下，就是 none。把元素的 display 设定为 none，该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。与此相对的是 visibility属性，这个属性最常用的两个相对的值是 visible（默认值）和 hidden。把元素的visibility 设定为 hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”。