HTML中的position样式

最新推荐文章于 2022-07-20 12:33:27 发布

野菌桃

最新推荐文章于 2022-07-20 12:33:27 发布

阅读量395

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/YJT180/article/details/102765723

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

定义

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

特点

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

用法示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.1{
				width: 100px;
				height: 100px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div class="1" style="background-color: red"></div>
		</div>
	</body>
</html>

position的五种属性值
static

默认值。没有定位。多个postion为默认值的元素将按代码中编写顺序从上到下排列。

例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 60px;
				height: 60px;
				position: static;
			}
		</style>
	</head>
	<body>
		<div style="background-color: #4C92FC;"></div>
		<div style="background-color: #E1E3E5;"></div>
		<div style="background-color: #E3AF29;"></div>
		<div style="background-color: green;"></div>
	</body>
</html>

效果为

fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 60px;
				height: 60px;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<div style="background-color: #4C92FC;"></div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
	</body>
</html>

添加br标签的目的是增加浏览器中内容，使得窗口中的进度条需要拖动来显示更多文本，以此验证fixed修饰的元素相对与浏览器窗口定位

效果为：

可以看到此时该元素处于窗口左上角（默认），接着我们拖动进度条，往下移动

发现元素仍然处于浏览器窗口的左上角

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 60px;
				height: 60px;
				position: static;
			}
			#remove{
				width: 60px;
				height: 60px;
				position: relative;
				bottom: 20px;//原有位置在改变后位置下方20像素处
				left: 60px;//原有位置在改变后位置左方60像素处
			}
		</style>
	</head>
	<body>
		<div id="remove" style="background-color:red ;"></div>
		<div style="background-color:gray ;"></div>
		<div style="background-color:green ;"></div>
		<div style="background-color:blue ;"></div>
	</body>
</html>

效果为

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 60px;
				height: 60px;
				position: relative;
			}
			#remove{
				width: 60px;
				height: 60px;
				position: absolute;
				bottom: 20px;
				left: 60px;
			}
			.stay{
				width: 60px;
				height: 60px;
				position: static;
			}
		</style>
	</head>
	<body>
		<div style="background-color: #4C92FC;">//作为非static位置的父元素
			<div id="remove" style="background-color: #E3AF29;"></div>//位置为absolute的子元素
		</div>
		<div class="stay" style="background-color: #E1E3E5;">//作为位置为static的父元素
			<div id="remove" style="background-color: gold;"></div>//位置为absolute的子元素
		</div>
	</body>
</html>

效果为：