HTML&CSS学习4——相对定位和绝对定位

最新推荐文章于 2023-08-30 20:03:26 发布

tuobana123

最新推荐文章于 2023-08-30 20:03:26 发布

阅读量5.8k

点赞数 1

分类专栏： Web 基础

本文链接：https://blog.csdn.net/pingnanlee/article/details/28669863

版权

Web 基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

关键点：

相对定位是元素便宜正常位置，占用空间

绝对定位是相对于敷元素的四个方向定位,必须父元素有position属性，否则依据有position属性的祖先元素，都没有将依赖body元素，不占用空间，并且两个绝对定位的元素可以使用z-index来定义谁上谁下。

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./css/init.css" />
	<style>
		#test1 {
			width: 300px;
			height: 300px;
			background-color: green;
		}
		#test2 {
			width: 300px;
			height: 300px;
			background-color: pink;
			position: relative;
		}
		#p1 {
			width: 100px;
			height: 100px;
			background-color: blue;
			position: relative;
			bottom: 50px;
		}
		#p2 {
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		#p3 {
			width: 100px;
			height: 100px;
			background-color: black;
			position: absolute;
			top: 50px;
			z-index: 1000;
		}
		#p4 {
			width: 100px;
			height: 100px;
			background-color: gray;
			position: absolute;
			top: 10px;
			z-index: 1001;
		}
	</style>
</head>
<body>
	<div id="test1">
		<p id="p1">我是p1,相对定位是元素便宜正常位置</p>
		<p id="p2">我是p2,相对定位是元素便宜正常位置</p>
	</div>

	<div id="test2">
		<p id="p3">我是p4,绝对定位是相对于敷元素的四个方向定位,必须父元素有position属性，否则依据有position属性的祖先元素，都没有将依赖body元素，并且不占用空间</p>
		<p id="p4">我是p4,绝对定位是相对于敷元素的四个方向定位,必须父元素有position属性，否则依据有position属性的祖先元素，都没有将依赖body元素，并且不占用空间</p>
	</div>
	
</body>
</html>