position之absolute

最新推荐文章于 2023-10-21 09:42:12 发布

小青龙8085

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量286

点赞数

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104032077

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

position：absolute

作用：使元素脱离常规流

特点：

脱离常规流
用百分比设置元素宽和高的时候要注意是按照谁的百分比设置的------最近定位祖先元素
如果没有最近定位祖先元素，会默认body是
z-index可以控制堆叠顺序

案例一（1，4）

html

	<body>
		<div class="box">A在上面</div>
		<div class="box">B在上面</div>
		<div class="box">C</div>
	</body>

css

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 2px red solid;
				line-height: 200px;
				text-align: center;
			}
			.box:nth-child(2){
				position: absolute;
				top: 20px;
				left: 30px;
				background: darkblue;
				z-index: 1;
			}
			.box:nth-child(1){
				position: absolute;
				top: 20px;
				left: 30px;
				z-index: 999;
				background: skyblue;
			}

		</style>

效果：

案例二（解释第二个和第四个作用）

设置了含有box类的div以及parent类的div，其宽高都是百分之五十，通过实现含box类的div宽高为浏览器的50%、含child类的宽高为父容器宽高的50%来解释这个问题

<body>
	<div class="box"><span>box</span></div>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>

                        *{
				margin: 0;
				padding: 0;
			}
			
			.box{
				width: 50%;
				height: 50%;
				border: 1px skyblue solid;
				text-align: center;
				vertical-align: middle;
				display: table;
				position: absolute;
			}
			.box span{
				display: table-cell;
				vertical-align: middle;
			}
			.parent{
				width: 500px;
				height: 500px;
				position: relative;
				top: 400px;
				border: 1px red solid;
			}
			.child{
				width: 50%;
				height: 50%;
				border: 1px skyblue solid;
				position: absolute;
			}

效果：

案例三：

html

	<body>
		<div class="parent">
			<div class="child"></div>
		</div>
	</body>

css

			.parent{
				width: 500px;
				height: 500px;
				position: relative;
				top: 400px;
				border: 1px red solid;
			}
			.child{
				width: 50%;
				height: 50%;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto auto;
				border: 1px skyblue solid;
				position: absolute;
			}

效果：

如果把child类中的宽高去掉内外边框就会重合

child修改后的代码，其它不变：

			.child{
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				border: 1px skyblue solid;
				position: absolute;
			}

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position之absolute

position：absolute作用：使元素脱离常规流特点：脱离常规流用百分比设置元素宽和高的时候要注意是按照谁的百分比设置的------最近定位祖先元素如果没有最近定位祖先元素，会默认body是 z-index可以控制堆叠顺序案例一（1，4）html <body> <div class="box">A...
复制链接

扫一扫