相对定位和绝对定位

最新推荐文章于 2023-11-10 13:05:05 发布

初晨未凉

最新推荐文章于 2023-11-10 13:05:05 发布

阅读量286

点赞数

本文链接：https://blog.csdn.net/weixin_45638909/article/details/108225066

版权

1.相对定位
在使用相对定位的时候，不论是否以移动，都保持原先文档流的位置，即仍然占据空间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 800px;
				height: 200px;
				background-color: aquamarine;
			}
			.item1,.item2,.item3,.item4,.item5{
				border: 1px solid cornflowerblue;
				width: 50px;
				height: 50px;
				float: left;
				margin-left: 8px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-contetnt">
				<div class="item1">1</div>
				<div class="item2">2</div>
				<div class="item3">3</div>
				<div class="item4">4</div>
			</div>
			<div class="item5">5</div>
		</div>
	</body>
</html>

在这里插入图片描述
给1添加相对定位的时候

.item1{
		position: relative;
		top: 20px;
}

在这里插入图片描述
光给外层1234的盒子left没有反应
当给盒子相对定位的时候，没有脱离文档流，并且还占据着原来的位置，因此5并不会再最前面去

.box-contetnt{
		/* position: absolute; */
		position: relative;
		left: 400px;
}
.item1{
	position: relative;
	/* position: absolute; */
	top: 20px;
}

在这里插入图片描述
2.绝对定位，脱离文档流，不会保持原来的位置
，因此不占据空间。（这个时候的定位如果父元素设置的绝对定位，那么子元素的相对定位的偏移是在父元素位置的基础上进行偏移的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 800px;
				height: 200px;
				background-color: aquamarine;
			}
			.item1,.item2,.item3,.item4,.item5{
				border: 1px solid cornflowerblue;
				width: 50px;
				height: 50px;
				float: left;
				margin-left: 8px;
			}
			.box-contetnt{
				position: absolute;
				/* position: relative; */
				left: 400px;
			}
			.item1{
				position: relative;
				/* position: absolute; */
				top: 20px;
			}
			/* .item2{
				position: relative;
				left: 40px;
			} */
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-contetnt">
				<div class="item1">1</div>
				<div class="item2">2</div>
				<div class="item3">3</div>
				<div class="item4">4</div>
			</div>
			<div class="item5">5</div>
		</div>
	</body>
</html>

在这里插入图片描述

初晨未凉

关注

0
点赞
踩
0

收藏

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

1.相对定位在使用相对定位的时候，不论是否以移动，都保持原先文档流的位置，即仍然占据空间。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 800px; height: 200px; background-color: aquamarine;
复制链接

扫一扫