相对定位和绝对定位

*相对定位和绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对绝对定位</title>
		<style type="text/css">
		.parent{
			/*800*400 边框10像素红色 水平居中*/
			margin: 100px auto;
			width: 800px;
			height: 400px;
			border: 10px solid red;
			position: relative;
		}
		.son{
			/*100*100 蓝色背景*/
			width: 400px;
			height: 200px;
			background-color: blue;
			position: absolute;
			/*向右移动50像素*/
			/*left: -100px;*/
			right:0px;
			/*向下移动50像素*/
			/*top: 50px;*/
		}
		 .son1{
                width: 400px;
                height: 200px;
                background-color: lightgoldenrodyellow;
                position: absolute;
                left: 0px;
            }
            .son2{
                width: 400px;
                height: 200px;
                background-color: pink ;
                position: absolute;
                left: 0px;
                bottom: 0px;
            }
            .son3{
                width: 400px;
                height: 200px;
                background-color: orange;
                position: absolute;
                right: 0px;
                bottom: 0px;
            }
			
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son"></div>
				<div class="son1"></div>
				<div class="son2"></div>
				<div class="son3"></div>
			
		</div>
	</body>
</html>

相对定位****（relative）：参照物：元素自身原来的位置

​ 偏移：top/left/right/bottom 相对于自身原始位置移动

作用：给子元素绝对定位做父级参照物（父集设 relative，子 absolute 以父集为准)

绝对定位（absolute ）：参照物：向上找最近一个设置了父级元素；若无，则参照物为根元素

​ 偏移：top/left/right/bottom 相对于参照物四边定位

posted @ 2026-07-08 17:10  碰一下猫猫头  阅读(8)  评论(0)    收藏  举报