CSS 定位属性

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

 

只有将元素的position属性设定为relative、absolute或fixed，这个元素的top、right、bottom和left属性才会起作用

 

relative：相对的是它原来在文档流中的位置，可以使用top、right、bottom和left属性改变他的位置

 

absolute：绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来，绝对定位的元素完全脱离了常规文档流。绝对定位元素默认的定位上下文是body元素

 

fixed：从完全移出文档流的角度说，固定定位与绝对定位类似。p#specialpara {position:fixed; top:30px; left:20px;}但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。

 

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

 

 示例：相对定位

	<p>First Paragraph</p>
	<p>Second Paragraph</p>
	<p id="specialpara">Third Paragraph (with ID)</p>
	<p>Fourth Paragraph</p>

 

CSS

p#specialpara {position:relative; top:25px; left:30px;}

 

 

 

示例：绝对定位  不会保留元素本该显示的空间

CSS

p#specialpara {position:absolute; top:25px; left:30px;  color:red; background:#fff;}

 

 

示例：固定定位

CSS

p#specialpara {position:fixed; top:25px; left:30px; color:red; background:#fff;}