Css样式中的Position

本文链接： https://blog.csdn.net/weixin_45104211/article/details/102750981

一、作用：用于设置HTML元素在文件中的位置

Position的值：static 、relative、fixed、absolute；下面我将带着详细的了解一下Position的值得作用

二、属性样式的分析

一、static :

默认属性：元素会正常出现在相应的位置

如图下面的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.out{
				border: red 1px solid;
				height: 600px;
				width: 500px;
			}
			.in{
				border: blue 1px solid;
				height: 200px;
				width: 250px;
			}
		</style>
	</head>
	<body>
		<div class="out" >
			<div class="in" style=" background-color: wheat;"></div>
			<div class="in" style=" background-color: red;"></div>
			<div class="in" style=" background-color: blue;"></div>
		</div>
	</body>
</html>

默认执行结果如下：

二、relative：

作用：在正常元素出现的基础上相对该元素进行移动

下面我们把代码进行一定程度的改变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.out{
				border: red 1px solid;
				height: 600px;
				width: 500px;
			}
			.in{
				border: blue 1px solid;
				height: 200px;
				width: 250px;
			}
		</style>
	</head>
	<body>
		<div class="out" >
			<div class="in" style=" background-color: wheat;"></div>
			<div class="in" style=" background-color: red; position: relative; left: 20px;"></div>
			<div class="in" style=" background-color: blue;"></div>
		</div>
	</body>
</html>

代码解释：style样式中Position样式属性改变到relative；后面的移动可以通过样式——top、bottom、left、right来改变距离原本未知的距离；

三、absolute属性

absolute样式的排列的作用是根据非static属性的父代位置决定的：其中也可以使用——top、bottom、left、right属性样式

下面的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.out{
				border: red 1px solid;
				height: 600px;
				width: 500px;
			}
			.in{
				border: blue 1px solid;
				height: 200px;
				width: 250px;
			}
		</style>
	</head>
	<body>
		<div class="out" style="position: relative;" >
			<div class="in" style=" background-color: wheat;"></div>
			<div class="in" style=" background-color: red; position: absolute; left: 20px;"></div>
			<div class="in" style=" background-color: blue;"></div>
		</div>
	</body>
</html>

注：此时的父代标签中的Position已经调成非默认值；所以子代absolute的参考变成了父代的模块

如图会发现出现了一个不同的现象：原因是absolute的浮动特性；（此时的absolute的相当于飘在下面的图层之上）

四、fixed 固定属性样式：

样式的参考系是和整体的页面有关系：也就是说无论是页面的大小、比例、位置；fixed属性样式就是简单的位于超文本的同一位置：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.out{
				border: red 1px solid;
				height: 600px;
				width: 500px;
			}
			.in{
				border: blue 1px solid;
				height: 200px;
				width: 200px;
			}
			
		</style>
	</head>
	<body>
		<div class="out" style="position: relative;" >
			<div class="in" style=" background-color: wheat;"></div>
			<div class="in" style=" background-color: red; position: fixed; left: 20px; bottom: 10px;"></div>
			<div class="in" style=" background-color: blue;"></div>
		</div>
	</body>
</html>

此时的红色板块也是具有浮动属性，‘’飘在‘’了图层的上面——通过比较下面的两幅图片：

可看出fixed属性样式的变化“人如其名”，就是固定在窗口的某一位置；

Css样式中的Position

猜你喜欢