css中position:absolute和relative笔记

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

琴无续弦

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

阅读量229

点赞数

分类专栏： css 文章标签： position css absolute relative

本文链接：https://blog.csdn.net/pigqhf/article/details/79534928

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

几年前学习了css。。。一头雾水，从没弄懂过，也就不想弄了。最近是无聊，还是要学下的，去看了别人的博客，自己搞搞，以下内容都是自己推想的，或者有错误，敬请纠正。

先来看没加任何position的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#a{
			margin: 0 auto;
			height: 500px;
			width: 500px;
			background: #aeeee2;
			z-index: -1;
		}
		#b{			
			height: 400px;
			width: 300px;
			background: purple;
		}
		#c{
			height: 200px;
			width: 200px;
			background: blue;
		}
		#d{
			height: 100px;
			width: 100px;
			background: black;
		}

	</style>
</head>
<body>
	<div id="a">
		<div id="b">
		    <div id="c">
			<div id="d"></div>
		    </div>
		</div>
	</div> 
	
</body>
</html>

1.结果如图，这里很容易理解