定位的分类

最新推荐文章于 2024-08-12 01:25:53 发布

Rindy94

最新推荐文章于 2024-08-12 01:25:53 发布

阅读量158

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/Rindy94/article/details/127302812

版权

本文探讨了前端开发中的定位技术，主要涉及相对定位和绝对定位。相对定位保留元素在标准流中的位置，允许元素相对于其初始位置偏移；而绝对定位则使元素脱离标准流，根据最近已定位的祖先元素进行定位。在实际布局中，通常采用'大相小绝/子绝父相'的原则来优化布局。

摘要由CSDN通过智能技术生成

/* 相对定位relative:相对于原先的位置进行偏移 */
               /* 绝对定位absolute:参照有定位的父盒子,如果父盒子都没有定位,则参照body定位. */
               /* 相对定位不会脱标,绝对定位会脱离标准流,因此在布局上采用:
                   大相小绝/子绝父相！ */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			.bigbox{
				/* position: relative;
				left: 100px;
				top: 400px; */
				width: 1000px;
				height: 200px;
				border: 1px solid red;
			}
			.bottom{
				/* 相对定位relative:相对于原先的位置进行偏移 */
				/* 绝对定位absolute:参照有定位的父盒子,如果父盒子都没有定位,则参照body定位. */
				/* 相对定位不会脱标,绝对定位会脱离标准流,因此在布局上采用:
					大相小绝/子绝父相！ */
				position: absolute;
				top: 300px;
				left: 100px;
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			.test{
				position: fixed;
				right: 100px;
				bottom: 100px;
				width: 400px;
				height: 600px;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div class="box"></div>
		</div>
		<div class="bottom"></div>
		<div class="test"></div>
		
	</body>
</html>