相对定位和绝对定位 2019.9.20_相对定为-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43846299/article/details/101053087

本文深入解析CSS中的定位方式，包括绝对定位、相对定位的概念与使用场景。通过实例展示如何利用left、right、top、bottom属性确定元素位置，以及如何选择合适的参照点。探讨了定位带来的布局灵活性及其对父元素高度的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定位：（坐标确定，参照点）

position：

absolute 绝对定位
relative 相对定为

一、坐标确定

left

right

top

bottom

二、参照点

参照点选取取决于绝对定位还是相对定为

1.绝对定位：当前元素的第一个应用相对或绝对定位的祖先元素，找不到用浏览器的左上角

 html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		<style >
			*{margin: 0px; padding: 0px;}
		</style>
		
	</title>
</head>
<body>
<div style="width: 300px; height: 300px; background: red">
	<div style="width: 200px; height: 200px; background: green;position: absolute; left: 30px; top: 120px">
		<div style="width: 100px; height: 100px; background: yellow">
			<div style="width: 50px; height: 50px; background: currentColor;position: absolute; left: 120px; top: 20px">
	
	
</div>
	
</div>
	
</div>	
	
</div>

</body>
</html>

2.相对定位：当前元素原来未设置定位时的位置

最常见的应用：

父元素设置relative

子元素设置absolute

优点：灵活

缺点：不易掌控

一旦元素设置了定位属性，就脱离文档流，父元素高度发生变化

三、那么如何让父元素自动适应子元素高度？

1.父元素的height=子元素的height （用js）

2.父元素最后一个子元素设置clear：both