CSS定位介绍

最新推荐文章于 2023-12-02 11:02:39 发布

端脑

最新推荐文章于 2023-12-02 11:02:39 发布

阅读量155

点赞数

分类专栏：前端文章标签： CSS定位介绍

本文链接：https://blog.csdn.net/qq_43776742/article/details/98061649

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

定位(position)

边偏移
- top 顶端偏移量定义元素相对于其父元素上边线的距离
- left 定义元素相对于其父元素左边线的距离
- right 定义元素相对于其父元素右边线的距离
- bottom 定义元素相对于其父元素下边线的距离
静态定位（浏览器默认为静态定位）
- position: static
- 元素默认的定位方式，假如元素position设置为static，则元素定位在静态位置（即文档流中默认的位置）
相对定位
- position: relative
- 相对自己做偏移，相对定位作用 1 做一些位置微调 2 配合绝对定位使用
- 注意相对定位的元素不脱标，之前的位置仍然占有
绝对定位
- position: absolute
- 绝对定位的盒子脱标
- 工程上常常使用子绝父相，父亲相对定位占有位置不脱标，儿子采用绝对定位不占有位置完全脱标
固定定位（position: fixed）
- 参考点浏览器左上角
- 固定定位的元素脱标不占有位置
- 兼容性 ie6低版本不支持固定定位

静态定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div  {
	   	  width: 200px;
	   	  height: 200px;
	   	  background-color: red;
	   	 /*  position: static;
	   	 left: 200px;
	   	 top: 200px; */
	   }
	</style>
</head>
<body>
	<div></div>
</body>
</html>

返回顶部

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 100px;
	   	   height: 100px;
	   	   background-color: red;
	   	   margin-bottom: 20px;
	   }

	   div:nth-child(2) {
	   	  position: relative;
	   	  left: 150px;
	   	  top: 150px;
	   }


	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

返回顶部

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	   width: 100px;
	   	   height: 100px;
	   	   background-color: red;
	   	   margin-bottom: 20px;
	   }

	   div:nth-child(1) {
	   	  /*绝对定位盒子脱标 不占位置*/
	   	  position: absolute;
	   	  left: 150px;
	   	  top: 150px;
	   	  background-color: yellow;
	   }


	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

绝对定位的参考点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   .fa {
	   	   width: 200px;
	   	   height: 200px;
	   	   background-color: red;
	   	   margin: 200px;
	   }

	   .fa .son {
	   	   width: 100px;
	   	   height: 100px;
	   	   background-color: green;
	   	   /* 假如父亲没有定位 儿子以浏览器为基准点对齐*/
	   	   position: absolute;
	   	   left: 20px;
	   	   top: 20px;
	   }
	</style>
</head>
<body>
	<div class="fa">
		<div class="son"></div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   .fa {
	   	   width: 200px;
	   	   height: 200px;
	   	   background-color: red;
	   	   margin: 200px;
	   	   position: relative;
	   	   top: 100px;
	   	   left: 100px;
	   }

	   .fa .son {
	   	   width: 100px;
	   	   height: 100px;
	   	   background-color: green;
	   	   /* 假如父亲有定位(相对或者绝对) 儿子以父亲基准点对齐*/
	   	   position: absolute;
	   	   left: 20px;
	   	   top: 20px;
	   }
	</style>
</head>
<body>
	<div class="fa">
		<div class="son"></div>
	</div>
</body>
</html>

绝对定位的应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    .fa {
	    	width: 600px;
	    	height: 300px;
	    	margin: 60px auto;
	    	background-color: skyblue;
	    	position: relative;
	    }
           
        /*让儿子盒子水平居中*/   
	    .son {
	    	width: 200px;
	    	height: 100px;
	    	background-color: pink;
	    	/* margin: 0 auto; 对绝对定位的盒子无效*/
	    	position: absolute;
	    	/*做法一（推荐）：*/
	    	left: 50%; /*百分比参考父亲的宽度*/
	    	margin-left: -100px; /*自己的宽一半*/
	    	top: 50%;
	    	margin-top: -50px;
	    	/*做法二：*/
	    	/* left: 300px;
	    	top: 150px; */
	    }
	</style>
</head>
<body>
	<div class="fa">
		<div class="son"></div>
	</div>
</body>
</html>

返回顶部

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    * {
	    	padding: 0;
	    	margin: 0;
	    } 

	    body {
	    	height: 2000px;
	    }

	    .fa {
	    	width: 600px;
	    	height: 300px;
	    	margin: 60px auto;
	    	background-color: skyblue;
	    	position: relative;
	    }

	    span {
	    	width: 300px;
	    	height: 100px;
	    	background-color: green;
	    	position: fixed;
	    	top: 60px;
	    	left: 50px;
	    }
	</style>
</head>
<body>
	<div class="fa">
		<span class="son">我是一段文字</span>
	</div>
</body>
</html>