HTML_position

SDWESCES

已于 2022-03-14 16:59:00 修改

阅读量104

点赞数

分类专栏： html 文章标签： html css

于 2021-02-08 15:44:45 首次发布

本文链接：https://blog.csdn.net/weixin_47484523/article/details/113754872

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

position

position	fixed	absolute	relative
解释	固定定位	相对定位	绝对定位
无父级	释放了物理位置,保留空间位置,不会随着网页的滚动而滚动,悬浮在窗口上,位移的参考对象是body	释放了物理位置,保留空间位置,会随着网页的滚动而滚动,位移的参考对象是body,	不会释放物理位置,位移的参考对象是本身的物理位置
有父级无定位	会释放掉自己的父级,位移的参考对象是body	会释放掉自己的父级,位移的参考对象是body	不会释放掉自己的父级,位移的参考对象是本身的物理位置
有父级有定位	同上	不会释放掉自己的父级,位移的参考对象是自己的父级	同上
应用	悬浮广告,导航条	解决网页中重叠的问题	固定一个模块,作父级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>position定位</title>
		<!--
			作者：shidiwen
			时间：2021-01-24
			描述：position
			position:定位
			fixed:固定定位,释放了物理位置,.在有父级(无论定位与否)的状态下,会释放掉自己的父级,保留空间位置,不会随着网页的滚动而滚动,悬浮在窗口上,位移的参考对象是body
			     top left right bottom:位移方向 可以是正数 表示正方向移动 负数 表示反方向移动
			absolute:相对定位,释放了物理位置,在有父级(无定位)的状态下,会释放掉自己的父级,保留空间位置,会随着网页的滚动而滚动,位移的参考对象是body,在父级(有定位)状态下,不会释放掉自己的父级,位移的参考对象是自己的父级
			relative:绝对定位,不会释放物理位置,在有父级(无论定位与否)的状态下,不会释放掉自己的父级,位移的参考对象是本身的物理位置
		-->
		<link rel="stylesheet" href="css/position.css" type="text/css">
	</head>
	<body>
		<div class="no1">
			<div class="n-n01"></div>
			<div class="n-n02"></div>
		</div>
		<div class="no2"></div>
		<div class="no3">
			<div class="n3-n01"></div>
			<div class="n3-n02"></div>
		</div>
	</body>
</html>

@charset "utf-8";
*{
	padding: 0px;
	margin: 0px;
}
.no1{
	width: 600px;
	height: 600px;
	background-color: red;
    /*position:fixed;*/
	/*top:100px;*/
	/*left:300px;*/
	/*left:-200px;*/
	/*float:left;*/
	/*position: absolute;*/
	/*top:200px;*/
	/*position: relative;*/
	/*top:300px;*/
}
.n-n01{
	width: 200px;
	height: 200px;
	background-color: burlywood;
	/*position: fixed;*/
	/*top:20px;*/
}
.n-n02{
	width: 400px;
	height: 400px;
	background-color: peachpuff;
}
.no2{
	width: 400px;
	height: 500px;
	background-color: yellow;
	/*position: fixed;*/
	/*top:10px;*/
	/*position: absolute;*/
	/*top:20px;*/
	/*position: relative;*/
	/*top:30px;*/
}
.no3{
	width: 600px;
	height: 1200px;
	background-color: deeppink;
	position: relative;
}
.n3-n01{
	width: 200px;
	height: 200px;
	background-color: green;
	/*position: fixed;*/
	/*top:30px;*/
	/*position:absolute;*/
	/*top:30px;*/
	/*position: relative;*/
	/*top:30px;*/
	/*position: fixed;*/
	/*top:20px;*/
	position: absolute;
	top:20px;
}
.n3-n02{
	width: 400px;
	height: 400px;
	background-color: skyblue;
}

在这里插入图片描述

SDWESCES

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML_position

positionpositionfixedabsoluterelative解释固定定位相对定位绝对定位无父级释放了物理位置,保留空间位置,不会随着网页的滚动而滚动,悬浮在窗口上,位移的参考对象是body释放了物理位置,保留空间位置,会随着网页的滚动而滚动,位移的参考对象是body,不会释放物理位置,位移的参考对象是本身的物理位置有父级无定位会释放掉自己的父级,位移的参考对象是body会释放掉自己的父级,位移的参考对象是body不会释放掉自己的父级,位移
复制链接

扫一扫