详述position样式属性

最新推荐文章于 2024-04-21 22:38:54 发布

Zzze0101

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量262

点赞数

分类专栏： css 文章标签： position html

本文链接：https://blog.csdn.net/Zzze0101/article/details/90349192

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用于定义建立元素布局所用的定位类型，该属性有多个值：

值	描述
static	默认值。没有定位，元素出现在正常流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative	生成相对定位的标签，例如，“left:20” 会向标签的left位置添加 20 像素。
absolute	生成绝对定位的标签，相对于标签本身第一个position为非 static父元素进行定位。标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。
fixed	生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。元素通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位。
inherit	规定应该从父元素继承 position 属性的值。注：IE浏览器都不支持"inherit"属性值。

static

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>static</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
    	<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:static; top:20px; left:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
	</body>
</html>

position为static时，其所作用的标签没有脱离正常文档流，代码中top和left没有起作用。
在这里插入图片描述

relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>relative</title>
		<style type="text/css">
			.out{
				display: inline-block;
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:relative; top:20px; left:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
	</body>
</html>

执行结果：
在这里插入图片描述
说明：对比可以发现position为relative时标签的移动是相对于原来位置而言的，没有脱离正常文档流。

absolute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>absolute</title>
		<style type="text/css">
			.out{
				display: inline-block;
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		<div class="out" style="position:relative;">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:absolute;"></div>
        	<div  style="background-color: yellow;width: 120px;height: 120px;"></div>
    	</div>
		<div class="out" style="position:relative;">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:absolute; top:20px; left:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
	</body>
</html>

执行结果：
在这里插入图片描述
absolute修饰的元素是相对于除position为static以外的第一个父元素进行定位的。上述绿色方块是相对于其直接父标签div即为浅绿色框进行定位的，因为该浅绿色框的position为非static。
上面第二个图开始，绿色方块设置 position:absolute；使其所作用的标签脱离正常文档流，悬浮在父块上方，但未设置定位距离，所以还在原来位置。第三个图绿色方块设置position:absolute; top:20px; left:20px;定位到浅绿色框左上方。

fixed


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fixed</title>
		<style type="text/css">
			.out{
				display: inline-block;
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:fixed;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:fixed; top:20px; right:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

执行结果：
在这里插入图片描述

上述结果显示设置position:fixed;的绿色方块是相对于浏览器窗口进行定位的，若不设置定位地点则默认为原来位置。

Zzze0101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详述position样式属性

用于定义建立元素布局所用的定位类型，该属性有多个值：值描述static默认值。没有定位，元素出现在正常流中（忽略 top, bottom, left, right 或者 z-index 声明）。relative生成相对定位的标签，例如，“left:20” 会向标签的left位置添加 20 像素。absolute生成绝对定位的标签，相对于标签本身第一个posi...
复制链接

扫一扫