关于relative和absolute属性

最新推荐文章于 2022-07-31 14:09:48 发布

七七看起来萌萌哒

最新推荐文章于 2022-07-31 14:09:48 发布

阅读量439

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/az_77/article/details/52254330

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">一直以来对于position属性中的relative和absolute，多用于如果当前元素position属性为absolute，父级元素为relative，那么当前元素相对于父级元素定位。当父级元素内有padding等CSS属性时，则当前元素的原始点参照父级元素内容区的原始点进行定位。</span>

于是我想，那么子元素的子元素如果想要相对于子元素定位，那么应该怎么写呢。

于是在慕课网上提问，当然身体力行如本宝宝，提问完了顺手去写了个demo实现了一下。

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.parent{
			position: relative;
			width: 400px;
			height: 300px;
			background: red;
		}
		.child{
			position: absolute;
			top: 0;
			right: 0;
			background-color: blue;
			width: 150px;
			height: 100px;
		}
		.cc{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 50px;
			height: 20px;
			background: yellow;
		}
	</style>
</head>
<body>
	<div class = "parent">
		1
		<div class = "child">
			2
			<div class = "cc">
				3
			</div>
		</div>
	</div>
</body>
</html>

在这段代码中，父子关系为parent - child - cc，parent设置为relative，child和cc设置为absolute，然后结果是这样子的

因此，子元素的子元素要相对于子元素定位时，只需要将position属性设置为absolute就好了。

ok，慕课网有人给回复了，答案如下~

七七看起来萌萌哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于relative和absolute属性

一直以来对于position属性中的relative和absolute，多用于如果当前元素position属性为absolute，父级元素为relative，那么当前元素相对于父级元素定位。当父级元素内有padding等CSS属性时，则当前元素的原始点参照父级元素内容区的原始点进行定位。于是我想，那么子元素的子元素如果想要相对于子元素定位，那么应该怎么写呢。于是在慕课网上提问，当然身体力行
复制链接

扫一扫