CSS 定位 （Positioning）

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

关于定位

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

相关文章