网页CSS样式——详述position样式属性，static relatice fixed absolute

最新推荐文章于 2025-07-08 15:42:40 发布
原创 最新推荐文章于 2025-07-08 15:42:40 发布 · 459 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS中的position属性，包括static、relative、absolute和fixed四种定位方式的使用和效果，帮助理解元素在网页布局中的定位机制。

一、Position介绍

position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
常用值有static、absolute、fixed、relative这四种。

注：文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左到右进行流式排放的一种顺序。

二、四种常用position样式属性值介绍

1、static

默认值。没有定位，元素出现在正常流中（忽略top,bottom,left,right或者z-index声明）。

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>static</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
    	<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:static; top:20px; left:20px;/*top和left没起作用*/"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		说明：position为static时，其所作用的标签没有脱离正常文档流
	</body>
</html>

结果如下：
在这里插入图片描述

2、relative

生成相对定位的标签，因此，“left：20”会向标签的left位置添加20像素。

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>relative</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:relative;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		说明：position样式属性的属性值为relative，但是没有指定top、right、left和bottom，这时其位置没有发生变化，即没有脱离正常文档流。
    	<br/>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:relative; top:20px; left:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	说明：对比可以发现position为relative时标签的移动是相对于原来位置而言的，尽管如此，依然没有脱离正常文档流。
	</body>
</html>

结果如下：
在这里插入图片描述

3、absolute

生成绝对定位的标签，相对于标签本身第一个position为非static的父元素进行定位。标签通过“left”，“top”，“right”以及“bottom”样式属性进行定位。如果该标签所在的父标签均没有设置position为非static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动条的滑动而滑动。

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>absolute</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<br/>
		<div class="out" style="position:relative;">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:absolute;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		说明：position样式属性的属性值为absolute会使其所作用的标签脱离正常文档流。
    	<br/>
		<div class="out" style="position:relative;">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:absolute; top:20px; left:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	说明：position为absolute的div是相对于其直接父标签div进行定位的，因为其直接父标签div的position为非static,而absolute修饰的元素是相对于除position为static以外的第一个父元素进行定位的。
	</body>
</html>

结果如下：
在这里插入图片描述

4、fixed

生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动条的滑动而滑动。元素通过“left”，“top”，“right”以及“bottom”样式属性进行定位。

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fixed</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		<br/>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:fixed;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
		说明：position样式属性的属性值为fixed会使其所作用的标签脱离正常文档流。
    	<br/>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:fixed; bottom:20px; left:20px;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	说明：position为fixed的div是相对于浏览器窗口进行定位的。
	</body>
</html>

其结果如下：
向下滑动前的图示
向下滑动后的图示

三、注意

任何元素都可以定位，但但absolute和fixed元素会生成一个块级框，不论该元素本身是不是块级元素。relative元素会相当于它在正常流中的默认位置偏移。

CandidBoy
关注
1.2-6css定位属性
weixin_58526727的博客
06-01 349
定位属性 我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。 定位属性 position 属性名： position。 属性值： relative 相对定位 absolute 绝对定位 fixed 固定定位 作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移 偏移量属性 定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。 水平方向：left、right。 垂直方向：top、bottom。 属性值：常用 px 为单位的数值，或者百分比。
不受控制的 position:fixed
weixin_33966095的博客
08-14 502
大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 但是，在许多特定的场合，指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。这是为何呢？   失效的 position:f...
CSS——position样式属性
YXX_decsdn的博客
05-19 431
positionstaticfixedrelativeabsolute 文档流的概念：文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。 position样式属性：用于定义建立元素布局所用的定位类型，该属性有多个值，下边介绍最常见的四个： static static：默认值。没有定位，元素出现在正常流中（忽略 top, bottom, ...
CSS样式布局的艺术：深入理解Position与Flexbox
最新发布
2401_87038800的博客
07-08 743
Position和Flexbox是现代CSS布局的两大支柱。Position：适用于精确控制元素位置Flexbox：适用于内容流和分布排列实际项目中，大多数布局会结合使用这两种技术。掌握它们的关系和最佳实践，你将能创建出既美观又灵活的网页设计。之前作者有点忙，没有发现有一个尘封已久的草稿（就是上一篇啦），本来是要讲盒子和定位的，后来发现将定位和弹性布局一起讲更合理，所以努力肝出这一篇博客。另外提一嘴，大物，离散和电工是啥必学的科目吗~<head>
Css样式中的Position
weixin_45104211的博客
10-26 619
一、作用：用于设置HTML元素在文件中的位置 Position的值：static 、relative、fixed、absolute；下面我将带着详细的了解一下Position的值得作用 二、属性样式的分析 一、static : 默认属性：元素会正常出现在相应的位置 如图下面的代码： <!DOCTYPE html> <html&...
position样式属性
QBjie的博客
07-15 459
position：用于定义建立元素布局所用的定位类型，该属性有多个值 1：static：默认值。没有定位， 2：生成相对定位的标签，相对于自己位置进行变换。例如：“left:20px” 会向标签的left位置移动 20 像素 3：absolute：相对于标签本身第一个position为非 static父元素进行定位，标签通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行定位。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行
HTML中的position样式
YJT180的博客
10-27 460
定义 position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。 特点 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常位置中的默认位置偏移。 用法示例 <!DOCTYPE html> <html> <head&...
Position属性之relative用法
11-23
Position属性用于设定元素的定位类型，主要有以下几种值：static、relative、absolute和fixed。默认情况下，所有元素的Position属性为static，意味着元素遵循正常的文档流，按顺序从上到下、从左到右排列。 1. ...
CSS规则优化：提升网页制作效率技巧
同时，理解CSS的盒模型（包括content、padding、border和margin），以及position属性（static、relative、absolute、fixed）对于布局至关重要。对于跨浏览器兼容性问题，特别是针对旧版IE的处理，也需要有一定的了解...
掌握CSS 2.0：高级编程与样式表中文手册
`position`属性提供了static、relative、absolute、fixed等定位方式，支持元素在页面中精确定位。 #### 4. 弹性布局和固定布局 CSS2.0区分了弹性布局和固定布局。在固定布局中，页面尺寸不会随着浏览器窗口的调整而...
CSS2.0中文样式参考手册：便捷查阅工具
- 定位控制包括 `position` 属性的 `static`、`relative`、`absolute`、`fixed` 和 `sticky` 值。 - `float` 属性可以设置元素浮动，常用于实现文字环绕效果。 - 清除浮动和防止元素内容溢出容器是布局中的常见...
深入解析公共代码样式设计：CSS最佳实践
- **定位（Positioning）**：通过`position`属性控制元素位置，常见的值有`relative`、`absolute`、`fixed`和`static`。 - **弹性盒模型（Flexbox）**：一种用于在不同屏幕尺寸和不同显示设备上提供一致的布局排列...
CSS 中position样式
宇宙奇怪理论的博客
07-15 216
position:文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container"> <div id="fir
CSS样式布局：position属性
龙雪的博客
08-21 719
position属性：用于定义建立元素布局所用的定位类型，该属性有多个值： 值 描述 static 默认值。没有定位，元素出现在正常流中（忽略 top, bottom, left, right 或者 z-index 声明）。 relative 生成相对定位的标签，相对于标签原来位置进...
CSS学习历程——（三）详述position样式属性，static relatice fixed absolute
易碎的_骄傲着
05-20 206
fixed 相对窗口定位 展示效果，注意观察位置 添加fixed属性，添加滚轮，再观察
详解CSS样式的position属性
weixin_30387339的博客
06-09 108
　　平时在写css样式的时候position是我们比较常用的一个属性。有时候会弄不清其几个属性值的真正区别。不过用的时间久了，也就慢慢的明白了。不过其实想用好position有时候还是需要些技巧的。写篇博文总结下自己。 position的作用：用于设置对html元素的定位方式　　 position属性的值： 值名称 描述 static position的默认...
CSS中position样式属性
ANFO的博客
10-16 274
文档流 文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。 position样式属性 1.static 默认值。没有定位，元素出现在正常流中，就像下面的例子： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}">...
css的定位属性
weixin_66514297的博客
09-06 210
（2）绝对定位：position：absolute（给子元素设置绝对定位，会脱标且不占位；参照物：先找最近位置的已经定位的父元素若无则找浏览器可视区域位置；（1）相对定位：position：relative（给父元素设置，切改变位置的参照物是自己原来的位置 且会占位，不会脱离标准流，标签显示模式特点不变）（3）z-index：num 设置子元素盒子的显示的先后先显示的num的设的大一些，后显示的值设置小一些。（3）固定定位：position：fixed（特点：脱标且不占位；
Css样式--定位
LX_1234567的博客
10-16 564
Css样式--定位
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值