CSS之定位详解

最新推荐文章于 2021-07-02 18:03:47 发布

吃喝玩乐秀起来

最新推荐文章于 2021-07-02 18:03:47 发布

阅读量278

点赞数

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

本文链接：https://blog.csdn.net/weixin_49855251/article/details/113601354

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

inherit 从父元素继承 position 属性的值

定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
相对定位元素的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style type="text/css">
		
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:50px auto 0;
		}

		.box01,.box02{
			width:300px;
			height:100px;
			margin:10px;
		}

		.box01{
			background-color:green;
			/* 相对定位 */
			position:relative;
			left:50px;
			top:50px;
		}


		.box02{
			background-color:gold;
		}



	</style>
</head>
<body>
	<div class="con">
		<div class="box01"></div>
		<div class="box02"></div>
	</div>
</body>
</html>

截图：
在这里插入图片描述
绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style type="text/css">
		
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:50px auto 0;
			/* 首先需要这里定位一下要不然就会以body作为参照 */
			position:relative;
		}

		.box01,.box02{
			width:300px;
			height:100px;
			margin:10px;
		}

		.box01{
			background-color:green;
			/* 绝对定位 */
			position:absolute;
			left:50px;
			top:50px;
		}


		.box02{
			background-color:gold;
		}



	</style>
</head>
<body>
	<div class="con">
		<div class="box01"></div>
		<div class="box02"></div>
	</div>
</body>
</html>

在这里插入图片描述
固定定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style type="text/css">
		
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			margin:50px auto 0;
			position:relative;
		}

		.box01,.box02{
			width:300px;
			height:100px;
			margin:10px;
		}

		.box01{
			background-color:green;
			/* 固定定位 相当于窗口定位不管父级是否定位 */
			position:fixed;
			right:50px;
			bottom:50px;
		}


		.box02{
			background-color:gold;
		}



	</style>
</head>
<body>
	<div class="con">
		<div class="box01"></div>
		<div class="box02"></div>
	</div>
</body>
</html>

在这里插入图片描述
层级定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.con{
			width:400px;
			height:400px;
			border:1px solid #000;
			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;
			z-index:11
		}

		.box03{
			background-color:pink;
			left:60px;
			top:60px;
			z-index:12
		}

		.box04{
			background-color:yellowgreen;
			left:80px;
			top:80px;
		}

	</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>

截图：在这里插入图片描述

例子：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">		
		.con{
			width:100px;
			height:100px;
			background-color:gold;
			margin:50px auto 0;
			/* 绝对定位 */
			position:relative;
			border-radius:14px;
		}

		.box{
			width:28px;
			height:28px;
			background-color:red;
			color:#fff;
			text-align:center;
			line-height:28px;
			position:absolute;
			left:86px;
			top:-14px;
			/* 设置圆 */
			border-radius:14px;
		}


	</style>
</head>
<body>
	<div class="con">
		<div class="box">5</div>
	</div>
</body>
</html>