CSS中关于position的理解

最新推荐文章于 2022-07-16 10:52:41 发布

原创最新推荐文章于 2022-07-16 10:52:41 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

本文深入解析CSS中的position属性，包括absolute、relative、static和fixed四种定位方式。解释了每种定位方式下div元素如何显示和定位，以及它们如何影响页面布局。

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

absolute

当 position=absolute 时，div按照 block的效果显示出来，脱离了文档流，通过指定left和top属性值来表示出位置。若当前div没有position=relative的父级div时，该div按照body的左上角来表示。即，

<div style="width:100px;height:100px;
		background-color:black;
		position:absolute;
		left:100px;top:300px;"></div>

在这里插入图片描述
若有position=relative的父级div时，该div的位置从父级div的内部左上角表示。即

<div style="position:relative;left:100px;top:100px;width:200px;height:200px;
			background-color:pink;">
			<div style="width:100px;height:100px;
			background-color:black;
			position:absolute;
			left:100px;top:300px;"></div>
		</div>

在这里插入图片描述

relative

当 position=relative 时，div按照 html 的定位保留div的大小的位置，然后按照相对的位置通过left和top属性表示位置。

<div style="width:200px;height:200px;
			background-color:red;
			position:relative;
			left:0px;top:0px;"></div>
		<div style="width:200px;height:200px;
			background-color:red;
			position:relative;
			left:50px;top:300px;"></div>

在这里插入图片描述

static

当 position=static 时，div仍然处于文档流中，按照 html 的定位来显示，left和top属性值不起作用。

<div style="width:100px;height:100px;
			background-color:red;
			position:relative;
			left:0px;top:0px;"></div>
		<div style="width:100px;height:100px;
			background-color:red;
			position:relative;
			left:50px;top:200px;"></div>
			<div style="width:100px;height:100px;
			background-color:black;
			position:static;"></div>

在这里插入图片描述

fixed

当position=fixed时，div脱离文档流，当页面上下滑动时，div不随网页上下滑动。

<div style="
			width:100px;height:100px;
			position:fixed;right:100px;
			top:0px;background-color:pink;"></div>

在这里插入图片描述