定位、相对定位、绝对定位

最新推荐文章于 2023-05-05 07:54:08 发布

小脑斧123

最新推荐文章于 2023-05-05 07:54:08 发布

阅读量1.3k

点赞数 1

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/107131156

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

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

relative：生成相对定位元素，所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute： 生成绝对定位元素，元素脱离文档流，不占据文档流的位置,可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位,如果找不到，则相对于body元素进行定位。
fixed： 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static：默认值,没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
inherit： 从父元素继承position属性的值。

定位元素的偏移

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

相对定位

left：相对于左边向右偏移XXpx
top：相对于顶部向下偏移XXpx

绝对定位

left：上一个设置定位的父级元素相对于左边向右偏移XXpx，如果没有父级元素定位，则相对于body偏移
top：上一个设置定位的父级元素相对于顶部向下偏移XXpx，如果没有父级元素定位，则相对于body偏移

定位元素层级

位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

定位元素的特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素（不设置宽高，大小由内容决定）
绝对定位和固定定位后，该元素margin:50px auto 0 无法水平居中，因为auto失效，其他仍可用margin-left

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

		}

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

		.box01{
			background-color: green;
			position: relative;  /*相对定位*/
			left: 50px;  /*相对于左边向右偏移50px*/
			top: 50px;  /*相对于顶部向下偏移50px*/
			
		}

		.box02{
			background-color: gold;
			position: absolute;  /*绝对定位*/
			/*父级元素.con没有设置定位，则相对于body进行偏移*/
			left: 50px;  /*相对于body向右偏移50px*/
			top: 50px;  /*相对于body向下偏移50px*/
		}

		.box03{
			background-color: blue;
			position: fixed;  /*固定定位*/
			left: 100px;  /*相对于浏览器窗口向右偏移100px*/
			top: 100px;  /*相对于浏览器窗口向下偏移100px*/
		}

	</style>
</head>
<body>
	<div class="con">
		<div class="box01"></div>
		<div class="box02"></div>
		<div class="box03"></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; /*设定绝对定位的参照点*/
		}
		
		/*定义四个div元素的大小和绝对定位元素属性*/
		.con div{
			width: 200px;
			height: 200px;
			position: absolute;
		}

		.box01{
			background-color: green;
			left: 20px;  /*相对父级元素.con位置相对于左边向右偏移20px*/
			top: 20px;  /*相对父级元素.con位置相对于上边向下偏移20px*/
			z-index: 10;  /*设置层级为10 = 置顶，默认层级＜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;
		}

	</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>定位实例</title>
	<style type="text/css">
		.con{
			width: 100px;
			height: 100px;
			background-color: gold;
			margin: 50px auto 0;
			position: relative;

			border-radius: 14px;  /*半径14的圆角，除非半径50才能成圆*/
		}

		.box{
			width: 28px;
			height: 28px;
			background-color: red;
			color: white;
			text-align: center;
			line-height: 28px;
			position: absolute;
			right: -14px;
			top: -14px;

			border-radius: 14px;  /*半径14的圆*/
		}


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

	
</body>
</html>

定位元素的特性，定位居中、弹窗实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位实例</title>
	<style type="text/css">
		.con{
			width: 960px;
			height: 80px;
			background-color: gold;
			/*margin: 50px auto 0;  auto水平居中失效*/
			position: fixed;  /*固定定位，当前屏幕*/
			
			/*水平居中*/
			top: 0px;
			left: 50%;  /*偏移浏览器的一半位置*/
			margin-left: -480px;  /*再偏移父元素一半宽度*/
		}/*锁定父元素，下拉不消失*/


		p{
			text-align: center;
		}
		
		.popup{
			width: 500px;
			height: 300px;
			border: 1px solid #000;
			background-color: #fff;
			position: fixed; /*固定定位，当前屏幕*/

			left: 50%;
			margin-left: -251px;  /*水平居中*/

			top: 50%;
			margin-top: -151px;  /*垂直居中*/
			z-index: 9999  /*置于最前面*/
		}

		.popup h2{
			background-color: gold;
			margin: 10px;
			height: 40px;
		}

		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #000;
			left: 0px;
			top: 0px;
			opacity: 0.5;  /*透明度50%*/
			z-index: 9998;
		}

		.pop_con{
			display: none;  /*隐藏*/
			display: block;  /*显示*/
		}


	</style>
</head>
<body>
	<div class='con'>1111</div>
	
	<div class="pop_con">
		<div class="popup">
		<h2>弹窗标题</h2>
	</div>
	<div class="mask"></div>
	</div>

	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />

	

	
</body>
</html>

小脑斧123

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定位、相对定位、绝对定位

我们可以使用css的position属性来设置元素的定位类型, postion的设置项如下relative：生成相对定位元素，所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 absolute：生成绝对定位元素，元素脱离文档流，不占据文档流的位置,可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位,如果找不到，则相对于body元素进行定位。 fixed：生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
复制链接

扫一扫