CSS-position样式属性

最新推荐文章于 2021-08-04 08:34:45 发布

paku-san

最新推荐文章于 2021-08-04 08:34:45 发布

阅读量292

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35302939/article/details/90342177

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

position样式属性
1. static
2. relative
3. fixed
4. absolute

position样式属性

position有很多样式属性主要的有4个:static、relative、fixed、absolute

1. static

默认值。没有定位，元素出现在正常流中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red; height: 300px;width: 300px;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow; position: static;"></div>
			<div class="in" style="background-color: green;"></div>
	</body>
</html>

2. relative

生成相对定位的标签,“left:20” 会以当前的位置为基准向标签的left位置添加 20 像素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red; height: 300px;width: 300px;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow; position: relative;bottom: 20px;left: 20px;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
	</body>
</html>

3. fixed

生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。元素通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red; height: 300px;width: 300px;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow; position: fixed;bottom: 30px;right: 30px;"></div>
			<div class="in" style="background-color: green;"></div>
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
	</body>
</html>

效果
在这里插入图片描述
把页面向下滚动

在这里插入图片描述

4. absolute

生成绝对定位的标签，相对于标签本身第一个position为非 static父元素进行定位。标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动

直接使用position样式的absolute属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red; height: 300px;width: 300px;position: static;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow; position: absolute;bottom: 50px; right: 50px;"></div>
			<div class="in" style="background-color: green;"></div>
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
	</body>
</html>

在这里插入图片描述
滑动页面

可以给父标签修改position为relative属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red; height: 300px;width: 300px;position: relative;">
			<div class="in" style="background-color: black;"></div>
			<div class="in" style="background-color: yellow; position: absolute;bottom: 50px; right: 50px;"></div>
			<div class="in" style="background-color: green;"></div>
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
	</body>
</html>