2021-03-22

最新推荐文章于 2024-09-15 10:24:49 发布

北路有点堵车*

最新推荐文章于 2024-09-15 10:24:49 发布

阅读量50

点赞数 1

分类专栏：学习笔记笔记

本文链接：https://blog.csdn.net/d13368568386/article/details/115069606

版权

html 定位

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

笔记

19 篇文章 0 订阅

订阅专栏

定位

http://ding-piaopiao.gitee.io/xiaomi-showcase/%E5%B0%8F%E7%B1%B3/

布局：
标准流 + 浮动（一行来显示）+ 定位
定位：给盒子定位位置的
相对定位：不脱标；
绝对定位：会脱标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style>
			.box1{
				/* 大相小绝/子绝父相：父盒子相对定位，子盒子绝对定位*/
				width:1000px;
				height:1800px;
				border:solid 5px red;
			}
			div{
				width:200px;
				height:200px; 
			}
			.box2{
				/*position:定位  相对定位、绝对定位、固定定位 */
				position: relative;  /*相对定位：相对与原来的位置*/
				/*偏移量 left、right、top、bottom*/
				left:100px; /*往左边偏移像素*/
				top:100px;
				background-color:pink;
				z-index:1;/*正数负/负数/0：值越大，显示越靠前 */
			}
			.box3{
				position:absolute;/* absolute 绝对定位：根据上一个有定位的父盒子来
				                  偏移定位的，如果说往上都没有定位盒子，就根据body来偏移。*/
				top:100px;/*偏移量*/  /*绝对定位会图标*/
				background-color:deeppink ;
			}
			.box4{
				/*fixed 固定定位*/
				position:fixed;
				top:0px;
				right:100px;
				background-color:skyblue;
			}
			.box5{
				width:500px;
				height:50px;
				position:fixed;
				top:10px;
				background-color:darkblue;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
		</div>
	</body>
</html>