CSS position定位

最新推荐文章于 2023-10-21 09:42:12 发布

倔强的烤马铃薯

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量169

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_48604432/article/details/113677019

版权

css 专栏收录该内容

1 篇文章

订阅专栏

position定位通过顶部，底部，左侧和右侧属性进行定位

1.static（占文档流）
默认值，没有定位。

2.fixed（不占文档流）
相对于浏览器进行定位，固定在浏览器的某个位置，不会随着滚动条进行滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_fixed{
				position: fixed;
				top:50px;
				left:50px;
				height:50px;
				width:100px;
				border:1px solid black
			}
			.div_data{
				height:100px;
				width:100px;
				border:1px solid red
			}
		</style>
	</head>
	<body>
		<div class='div_fixed'>fixed定位</div>
		<div class='div_data'>数据数据</div>
	</body>
</html>

在这里插入图片描述
3.relative（占文档流）
相对定位元素的定位，是相对其文档流中正常位置进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_relative{
				position: relative;
				top:50px;
				left:50px;
				height:50px;
				width:100px;
				border:1px solid black
			}
			.div_data{
				height:100px;
				width:100px;
				border:1px solid red
			}
		</style>
	</head>
	<body>
		<div class='div_relative'>relative定位</div>
		<div class='div_data'>数据数据</div>
	</body>
</html>

在这里插入图片描述
4.absolute（不占文档流）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素则相对于html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_absolute{
				position: absolute;
				top:50px;
				left:50px;
				height:50px;
				width:100px;
				border:1px solid black
			}
			.div_data{
				height:100px;
				width:100px;
				border:1px solid red
			}
		</style>
	</head>
	<body>
		<div class='div_absolute'>absolute定位</div>
		<div class='div_data'>数据数据</div>
	</body>
</html>

在这里插入图片描述
5.sticky
粘性定位基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
.div_sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>开始滚动啦。</p>
<p>...</p>
<p>...</p>
<p>...</p>
<div class="div_sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
  <p>滚动...</p>
  <p>再滚动...</p>
  <p>滚动...</p>
  <p>再滚动...</p>
  <p>滚动...</p>
  <p>再滚动...</p>
</div>

</body>
</html>

在这里插入图片描述

6.重叠属性（不占文档流）
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。通过z-index进行设置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	body{
		margin: 0;
		padding: 0;
	}
.div_index {
	width:200px;
	height:200px;
	  background-color: #4CAF50;
	  border: 2px solid #4CAF50;
	  position:absolute;
		left:0px;
		top:0px;
		z-index:-1;
}
.div_bottom{
	width:100px;
	height:100px;
	  background-color: red;
	  border: 2px solid red;
}
</style>
</head>
<body>
<div class="div_index"></div>
<div class='div_bottom'></div>

</body>
</html>

在这里插入图片描述