CSS 定位属性

qianxiaona 2014-01-08

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 定位属性
 

 

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

CSS

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

 
CSS 定位属性
 

示例:固定定位

CSS

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

相关推荐