CSS 定位 (Positioning)

陪她去流浪 桃子 2015年04月05日 编辑 阅读次数:2432

关于定位

CSS中的定位(position)属性允许你规定一个元素的位置。

元素可以通过 top, bottom, left, right 属性来定位,然而,如果没有先设定好 position 属性的值的话,这些属性是不会正常工作的。并且随 position 的不同,它们的工作方式也有很大不同。

静态定位(Static Positioning)

默认情况下,HTML元素使用静态定位。一个使用静态定位的元素总是按照页面的正常流(Normal flow)来确定位置。啥叫正常流?简单地说就是:布局方式从左到右,从上到下,块级元素两边不能有其它元素等等。。。

静态定位的元素不受 top, bottom, left, top 属性的影响。

固定定位

使用固定定位的元素将相对于浏览器窗口来定位(如果该元素处于 iframe 中,则应相对于此 iframe 窗口),并且不受窗口滚动的影响。

使用固定定位的元素将会从窗口的正常流中移出。文档和其它元素的表现就如同这些固定定位的元素不存在一样。

固定定位的元素可以重叠在其它元素之上。

注:IE7 和 IE8 仅当在指定了 !DOCTYPE 时才会支持固定定位。

示例:点我查看效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>
	<head>
		<style type="text/css">
			div.fixed {
				position: fixed;
				width: 100%;
				left: 0px;
				top: 0px;
				/* 省略部分不相关属性 */
			}
		</style>
	</head>
	<body>
		<div class="fixed">
			这个示例展示了固定定位元素的位置将相对于当前的窗口而言。<br>
			并且不受滚动的影响。
		</div>
	</body>
</html>

相对定位

相对定位的元素的最终位置将相对于它的正常位置,其位置可以相对正常位置移动,也可以重叠在其它元素之上。但正常流中为它预留的空间将依然为它保留。

相对定位的元素经常被作为其它使用绝对定位的元素的容器。

观察下面两个例子,前一个未使用相对定位,后一个使用相对定位。

部分使用的代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div>
	<div style="width: 4em; height: 4em;"></div>
	<div style="width: 4em; height: 4em;"></div>
	<div style="width: 4em; height: 4em;"></div>
</div>
<div>
	<div style="position: relative; left: 0em;"></div>
	<div style="position: relative; left: 8em;"></div>
	<div style="position: relative; left: 0em;"></div>
</div>

使用相对定位后,“left: 8em;”使得:第2行中绿色的盒子相对于第1行向右2倍宽的距离,但绿色本身的位置还是存在的,所以蓝色的位置还是在第3!

绝对定位

绝对定位的元素的位置相对于其父级元素中第1个拥有非静态定位的元素。如果没有此元素,将相对于 <html>

和固定定位不同的是,它始终会跟着其父滚动。

重叠元素

处于正常流之外的元素可以和其它元素重叠放置。

z-index 属性指定元素的栈次序,它用于说明该元素应该位于前面,后面,或是其它。其值可正可负。值越大,元素越在布局的最前面。

标签:CSS · HTML