详解css属性 position

最新推荐文章于 2024-11-15 19:51:40 发布

aitang2184

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanhuan8808/p/3224649.html

版权

css属性 position:规定元素的定位类型（即选择哪种定位方式）。

提示：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

positon的值：

1.1默认值：static，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

在positon值为static时，定义属性top, bottom, left, right 或者 z-index不起作用。

例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>详解css属性position</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript">
		
	</script>
</head>
<body>
	<div style="position:static; left:100px; bottom:100px; width:120px; height:120px; background-color:#993;">
    	<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#CCC;"></div>
    </div>
</body>
</html>

看看页面效果：

可以看出属性：left:100px; bottom:100px;，没有起作用；

1.2position:inherit;

规定应该从父元素继承 position 属性的值。

提示：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

1.3position:relative;

生成相对定位的元素，相对于自己最近的定义了属性positon(默认值：static不可以)的父类元素进行定位，left:20px;就会相对于自己最近的定义了属性positon的父类元素的左边偏移20像素。

看看实例：

1.3.1 相对于自己最近的定义了属性positon的父类元素，positon:fixed;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>详解css属性position</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript">
		
	</script>
</head>
<body>
	<div style="position:fixed; left:100px; bottom:100px; width:120px; height:120px; background-color:#993;">
    	<div style="position:relative; left:100px; top:100px; width:100px; height:100px; background-color:#CCC;"></div>
    </div>
</body>
</html>

页面效果：

1.3.2相对于自己最近的定义了属性positon的父类元素，positon:relative;

html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>详解css属性position</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript">
		
	</script>
</head>
<body>
	<div style="position:relative; left:100px; bottom:100px; width:120px; height:120px; background-color:#993;">
    	<div style="position:relative; left:100px; top:100px; width:100px; height:100px; background-color:#CCC;"></div>
    </div>
</body>
</html>

页面效果：

1.3.3相对于自己最近的定义了属性positon的父类元素，positon:relative;

html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>详解css属性position</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript">
		
	</script>
</head>
<body>
	<div style="position:absolute; left:100px; bottom:100px; width:120px; height:120px; background-color:#993;">
    	<div style="position:relative; left:100px; top:100px; width:100px; height:100px; background-color:#CCC;"></div>
    </div>
</body>
</html>

页面效果：