四大定位

最新推荐文章于 2024-07-23 16:28:16 发布

Xiaaoke

最新推荐文章于 2024-07-23 16:28:16 发布

阅读量201

点赞数

分类专栏： # CSS 文章标签： css定位

如有争议，各抒己见；如有侵权，联系改之。

本文链接：https://blog.csdn.net/qq_45007419/article/details/103281389

版权

CSS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

定位类型

static：静态定位
fixed：固定定位
relative：相对定位
absolute：绝对定位

静态定位

就是标签不加任何定位属性的样子，默认的文档流布局。

固定定位

五个属性：left、right、top、bottom、z-index
语法：position: fixed;
所谓固定定位：固定在浏览器的某一个地方，不管页面怎么滑动标签都不会变化
相对于页面的body元素进行调整距离
脱离文档流

相对定位

五个属性：left、right、top、bottom、z-index
语法：position: relative;
所谓相对定位：相对于自身元素的初始位置的左上角进行调整距离
不脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>相对定位</title>
		<style type="text/css">
			div{
				height: 100px;
				width: 100px;
			}
			.div1{
				background-color: red;
			}
			.div2{
				background-color: orange;
				position: relative;
				top: 0px;
				left: 100px;
			}
			.div3{
				background-color: springgreen;
			}
		</style>
	</head>
	<body>
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</body>
</html>

不用定位的状况下 在这里插入图片描述
相对定位后

绝对定位

五个属性：left、right、top、bottom、z-index
语法：position: absolute;
绝对定位：相对于父级或者父级以上的是否设有非静态定位的属性，如果有就根据设有非静态定位的属性左上角进行调整距离，如果没有就根据浏览器的左上角进行调整距离
脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>相对定位</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				height: 100px;
				width: 100px;
			}
			.div1{
				background-color: red;
			}
			.div2{
				background-color: orange;
				position: absolute;
				top: 0px;
				left: 100px;
			}
			.div3{
				background-color: springgreen;
			}
		</style>
	</head>
	<body>
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
	</body>
</html>

使用绝对定位以后
在这里插入图片描述

Xiaaoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四大定位

定位类型static：静态定位fixed：固定定位relative：相对定位absolute：绝对定位静态定位就是标签不加任何定位属性的样子，默认的文档流布局。固定定位1.五个属性：left、right、top、bottom、z-index2.语法：position: fixed;3.所谓固定定位：固定在浏览器的某一个地方，不管页面怎么滑动标签都不会变化4.相对于页面的b...
复制链接

扫一扫

专栏目录