【复习】css中的position

时间：2014-04-29 13:45:20 收藏：0 阅读：354

mamicode.com,码迷好久不写CSS代码感觉忘的差不多了，代码就是要多敲才行的。就行武林中的武者一样，每天都要勤加练习才可。

正好写写博客，就当复习复习。

position 主要是用来元素的定位方式

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　绝对定位，不随滚动框改变位置。

mamicode.com,码迷下面是一些代码示例，有兴趣的可以敲一下，知识都在代码里。

<!DOCTYPE html>
<html>
	<head>
		<title>囚徒</title>
		<meta charset="utf-8" />
		<style type="text/css">
			h2.a{ /* 绝对定位 */
				position:absolute;
				left:200px;
				top:150px;
			}
			h3.b{ /* 相对定位 */
				position:relative;
				left:-20px;
			}
			h3.c{ /* 相对定位 */
				position:relative;
				left:20px;	
			}
			h2.d{
				position:fixed;
				top:50px;
				right:30px;
			}
			img.v{
				position:absolute;
				clip:rect(0px,50px,200px,0px);/*修剪为矩形*/
			}
			img.x{
				position:absolute;
				left:200px;
				top:100px;
				z-index:-1; /*等于-1 默认是0的 那么他的优先级就更低了，字体就在图片上了。*/
			}
		</style>
	</head>
	<body>
		<h2 class="a">赏金猎人，女枪正在大杀特杀。</h2>
		<h3 class="b">皮城女警，终结了蛮王的大杀特杀，完成三连杀。</h3>
		<h3 class="c">皮城女警，终结了蛮王的大杀特杀，完成三连杀1。</h3>
		<h2 class="d">提莫队长正在待命</h2>
		<p><img class="v" border="0" src="http://ubmcmm.baidustatic.com/media/v1/0f0002sMjlteo6mTNXP84s.jpg" width="250" height="250"></p>
		<p><img class="x" border="0" src="http://ubmcmm.baidustatic.com/media/v1/0f0002sMjlteo6mTNXP84s.jpg" width="250" height="250"></p>
	</body>
</html>