CSS---定位

最新推荐文章于 2024-03-12 10:33:36 发布

Go· again

最新推荐文章于 2024-03-12 10:33:36 发布

阅读量102

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_43766304/article/details/104780698

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述

定位三种方式

相对定位 ----------> 相对于自身进行定位
position: relative;
left: 50px;
top: 50px;
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---相对定位</title>
	<style type="text/css">
		.con{
			width: 400px;
			height: 400px;
			border: 1px solid black;
			margin: 50px auto 0;
		}
		.box01,.box02{
			width: 300px;
			height: 100px;
			margin: 10px;			
		}
		.box01{
			background-color: red;
			/* 相对定位 */
			position: relative;
			left: 50px;
			top: 50px;
		}
		.box02{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="" class="con">
		<div id="" class="box01">
			
		</div>
		<div id="" class="box02">
			
		</div>
	</div>
</body>
</html>

绝对定位 ---------->相对于上一个设置了定位的父级进行定位
找不到就以body进行定位
position:absolute ;
left: 50px;
top: 50px;
在这里插入图片描述

找不到就以body进行定位

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---相对定位</title>
	<style type="text/css">
		.con{
			width: 400px;
			height: 400px;
			border: 1px solid black;
			margin: 50px auto 0;
		}
		.box01,.box02{
			width: 300px;
			height: 100px;
			margin: 10px;			
		}
		.box01{
			background-color: red;
			/* 绝对定位 */
			position:absolute ;
			left: 50px;
			top: 50px;
		}
		.box02{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="" class="con">
		<div id="" class="box01">
			
		</div>
		<div id="" class="box02">
			
		</div>
	</div>
</body>
</html>

固定定位------>相对于浏览器的窗口进行定位
position:fixed ;
right: 50px;
bottom: 50px;
在这里插入图片描述
----------------------

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---相对定位</title>
	<style type="text/css">
		.con{
			width: 400px;
			height: 400px;
			border: 1px solid black;
			margin: 50px auto 0;
			
		}
		.box01,.box02{
			width: 300px;
			height: 100px;
			margin: 10px;			
		}
		.box01{
			background-color: red;
			/* 固定定位 */
			position:fixed ;
			left: 50px;
			top: 50px;
		}
		.box02{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="" class="con">
		<div id="" class="box01">
			
		</div>
		<div id="" class="box02">
			
		</div>
	</div>
</body>
</html>

定位层级
z-index------>可以做弹窗效果，将z-index的值设置为最大。例如：9999
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---定位的层级</title>
	<style type="text/css">
		.con{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			margin: 50px auto 0;	
			position: relative;
		}
		.con div{
			width: 200px;
			height: 200px;		
			position: absolute;
		}
		.box01{
			background-color: green;
			left: 20px;
			top: 20px;
			z-index: 10;/* 设置层级 */
		}
		.box02{
			background-color: gold;
			left: 40px;
			top: 40px;
			
		}
		.box03{
			background-color: blue;
			left: 60px;
			top: 60px;
		}
		.box04{
			background-color: pink;
			left: 80px;
			top: 80px;
			z-index: 13;
		}
	</style>
</head>
<body>
	<div class="con">
		<!-- 每个元素都是块元素，每个元素占一行 -->
		<div class="box01"></div>
		<div class="box02"></div>
		<div class="box03"></div>
		<div class="box04"></div>
	</div>
</body>
</html>