position之relative

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

小青龙8085

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

阅读量6.4k

点赞数 4

分类专栏：寒假前端

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

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

position：relative

作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素

特点：

可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。
相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有
任何元素都可以设置为relative，他的绝对定位的后代可以相对于他进行绝对定位
也能使浮动的元素发生偏移，并控制他们的堆叠顺序（z-index）

案例一（对第一和第二个特点进行解释）

有三个div，以常规流的方式排列。

<body>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</body>

.box{
	height: 200px;
	width: 200px;
	border: 2px solid;
}

现在对第二个盒子加相对定位

.box:nth-child(2){
	position:relative;
	left: 200px;
	border-color: red;
}

效果：

可以看出第二个盒子盒子相对于自己原来的位置进行了left：10px；并且原来的空间还在那，并没有被下面的元素所代替。

案例二（第三个特点）

在一个父类（parent类）div里面嵌套一个字类（child类）div

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

*{
	margin: 0;
	padding: 0;
}
.parent{
	height: 500px;
	width: 500px;
	border: 2px solid;
	position: relative;
	margin: 0 auto;
}
.child{
	height: 200px;
	width: 200px;
	position:absolute;
	left: 20px;
	border-color: peachpuff;
	background-color: salmon;
}

效果图：

外面的div加了个relation，里面的加了给absolution、left：10px，里面的div相对于父div向右移了10px

案例三（解释第四个特点，也能使浮动的元素发生偏移，并控制他们的堆叠顺序（z-index））

这个案例使两个浮动的水平相邻的div重叠，并且运用z-index属性控制谁在上面谁在下面，注意：两个div都要加position：relative

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 200px;
				height: 200px;
				border: 1px skyblue solid;
				float: left;
				text-align: center;
				line-height: 200px;
				z-index: 9;
				position: relative;
				
			}
			.box2{
				width: 200px;
				height: 200px;
				border: 1px darkkhaki solid;
				float: left;
				position: relative;
				left: -201px;
				text-align: center;
				line-height: 200px;
				z-index: 1;
			}
		</style>		
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</body>
</html>

小青龙8085

关注

4
点赞
踩
19

收藏

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

position：relative作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素特点：可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有任何元素都可以设置为relative，...
复制链接

扫一扫