css 关于元素定位的学习

最新推荐文章于 2026-06-17 09:05:06 发布

原创最新推荐文章于 2026-06-17 09:05:06 发布 · 841 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

本文详细介绍了CSS中的四种定位模式：静态定位、相对定位、绝对定位和固定定位。并通过具体实例展示了不同定位方式的效果及其对页面布局的影响。

一、定位模式

选择器{position:属性值}

1、static ：静态定位（默认的定位方式）

2、relative ：相对定位，相对于其原文档流的位置进行定位。

3、absolute : 绝对定位，相对于其上一个已经定位的父元素进行定位。

4、fixed ：固定定位，相对于浏览器窗口进行定位。

二、位偏移

用于精确定位元素的具体位置

top、bottom、left、right

三、定位模式详解

1、静态定位 state

（1）静态定位是元素的默认定位方式

（2）任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性的时候，并不说明没有自己的位置，它会遵循默认值显示为静态位置。

（3）在静态定位状态下，无法通过位偏移属性来改变元素的位置

2、相对定位 relative

（1）相对定位是将元素相对于它自己在标准文档流中的位置进行定位

（2）对元素进行相对定位后，可以通过位偏移属性改变元素的位置，但它在文档流中的位置仍然保

3、绝对定位 absolute

（1）绝对定位是将元素根据最近已经定位的父元素进行定位。

（2）如果所有的父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

（3）绝对定位的元素将脱离标准文档流的控制，不在占据标准文档流中的空间。

来一个小案例，看看效果

<style>
	.father{
		width:300px;
		height:300px;	
		background:#CCC;
		padding:10px;
	}
	.child01,.child02,.child03{
		width:100px;
		height:50px;
		line-height:50px;
		border:1px soild #000;
		background:#999;
		text-align:center;
		margin:10px 0px;
	}
</style>
<body>
	<div class="father">
    	<div class="child01">child01</div>
        <div class="child02">child02</div>
        <div class="child03">child03</div>
    </div>
</body>

运行结果：

下边对child02进行相对定位，从下图可以看出，相对定位是相对于自身的默认位置进行偏移，但其在文档流中的位置仍然保留。

	.child02{
		position:relative;
		left:150px;
		top:100px;
	}

在做一个绝对定位的看一看

在网页中，一般需要子元素相对于其直接父元素的位置保持不变，即子元素依据其直接父元素绝对定位，但如果直接父元素不需要定位，怎么办？

可将直接父元素设置为相对定位，但是不对其设置偏移量。

.father{
   	width:300px;
	height:300px;	
	background:#CCC;
	padding:10px;
	position:relative;
}
.child02{
	position:absolute;
	left:150px;
	top:100px;
}

运行截图