第十一周 相对绝对定位

相对绝对定位

<!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{
					width: 400px;
					height: 200px;
					background-color: cornflowerblue;
					position: absolute;
					right:0px;
				
				}
				.son1{
					width: 400px;
					height: 200px;
					background-color: yellow;
					position: absolute;
					left: 0px;
				}
				.son2{
					width: 400px;
					height: 200px;
					background-color: coral;
					position: absolute;
					left: 0px;
					bottom: 0px;
				}
				.son3{
					width: 400px;
					height: 200px;
					background-color: greenyellow;
					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>
posted @ 2026-05-31 13:20  今今日晴  阅读(17)  评论(0)    收藏  举报