网页基础（二十二）相对定位

最新推荐文章于 2024-02-14 11:51:22 发布

@大娱乐家

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量398

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104648831

版权

首先看一个图片

如何将蓝色与黄色块对调就用到了position定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位</title>
		<style>
			.c1{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				
			}
			.c2{
				width: 200px;
				height: 200px;
				background-color: blue;
				/*margin-top:200px ;*/
				/*设置上外边距*/
				/* 
				 * 定位:
				 * 把指定元素摆放到任意位置
				 * position 设置定位
				 * static 默认值 没有定位
				 * relative 相对定位
				 * absolute 绝对定位
				 * fixed 固定定位 相对于浏览器窗口定位
				 * position设置为relative时 则该元素开启了相对定位
				 * 1.当元素设置了相对定位后而不设置偏移量时元素不会发生改变
				 * 2.相对定位是相对于元素在文档流中原来的位置进行定位
				 * 3.相对定位会使元素不会脱离标准文档流
				 *  4.行内元素也可以使用定位 相对定位不会改变元素的本质 块还是块 行内还是行内
				/*
				 * 
				 * 
				 * 相对定位
				 */
				position: relative;
				
				top: 200px;
			}
			.c3{
				width: 200px;
				height: 200px;
				background-color: yellow;
			/*	margin-top: -400px;*/
				position: relative;
				top: -200px;
			}
		
		</style>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	
	</body>
</html>