position

最新推荐文章于 2025-05-27 18:06:33 发布

maotingmaoting

最新推荐文章于 2025-05-27 18:06:33 发布

阅读量138

点赞数

分类专栏： css 文章标签： xhtml

本文链接：https://blog.youkuaiyun.com/maotingmaoting/article/details/84358242

版权

css 专栏收录该内容

11 篇文章

订阅专栏

本文详细解析了CSS中的定位属性，包括static、relative、absolute和fixed四种模式，并通过实例展示了这些定位方式如何影响页面布局。

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

position

定义：

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

static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间

名词解释

包含块：

1. “根元素”的包含块（也称为初始包含块）由用户代理建立。在HTML中，根元素就是html元素，不过有些浏览器使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形。

2. 对于一个非根元素，如果其position值是relative或static,包含块则由最近的块级框、表单元格或者行内块祖先框的内容边界构成。

3. 对于一个非根元素，如果其position值是absolute,包含块设置为最近position值不是static的祖先元素。这个过程如下：

如果这个祖先元素是块级元素，包含块则设置为该元素的内边距边界；换句话说，就是由边框（border）界定的区域

如果这个祖先元素是行内元素，包含块则设置为该祖先元素的内容边界。在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中的第一个框内容区的上边界和左边界，包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从右向左读的语言中，包含块的右边界对应于第一个框的右内容边界，包含块的左边界则取自最后一个框的做内容边界。上下边界也是一样。（自己验证的结果：也是通过边框界定的,参看图示8）

如果没有祖先，元素的包含块定义为初始包含块。

static:

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

relative:

生成相对定位的元素，元素在文档流中所占空间仍然存在，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。而设relative后的元素top、left、right、bottom都是相对于该元素原本所占的空间进行偏移。（图示2）

#box_relative {position: relative; left: 30px; top: 20px;}

absolute:

position设为absolute时元素浮出、脱离文档流，原本在文档流中所占空间将不存在。相对其包含块进行定位。当此元素设置left、top、right、bottom后，如果他的祖先元素全都没有设置position：relative或position或fixed：absolute，那么此元素就是相对于body元素进行偏移（图示3）。否则是相对于自己最近的一个设置了position：relative或position或fixed：absolute的元素进行偏移, （图示4）

#box_absolute { position: absolute; left: 30px; top: 20px;}

注意：1.absolute是绝对的浮动，不会影响其他元素（即使是absolute元素）。

<div class="content">
	<div class="page" style="margin-right: 300px">page</div>
	<span style="position: absolute">cccccc</span>
	<div class="sidebar" style="width:300px;position: absolute">sidebar</div>
	<div>ddddddddd</div>
</div>

2.行内元素设置为absolute时，不仅左右（上下）margin、padding、width、height都起作用

<div class="content">
	<div class="page" style="margin-right: 300px">page</div>
	<span style="position: absolute;margin-top:30px;padding:20px;width:100px;height:100px;border:5px solid #1fe">cccccc</span>
	<div class="sidebar" style="width:300px;position: absolute">sidebar</div>
	<div>ddddddddd</div>
</div>

删除position:absolute后（正常span元素）的效果：

3.浏览器可以通过偏移量（top、bottom、left、right）自动地计算宽度或高度。

top:0;bottom:0;left:0;right:50%

4.可以通过设置宽度，高度，padding,margin,border等改变其实际高度和宽度。

top:0;bottom:0;left:0;right:50%；width:50%;height:100%;padding:2em;

5.自动边偏移：元素绝对定位时，如果除bottom外某个任意偏移属性设置为auto,会有一种特殊行为。以top为例，定位元素的顶端要相对于其未定位前本来的顶端位置对其。

<p>
	when we consider the effect of positioning,it quickly becomes clear that authors can do a great
	deal of damage to layout,just as they can do very interesting things.
	<span style="position: absolute;top: auto;left: auto">[4]</span>
	This is usually the case with useful technologies:the sword always has at least two edges, both of them sharp
</p>

6.一般地，如果有一个元素设置为auto，就会修改这个属性来满足整体样式。给定样式，元素会延伸到必要的宽度，而不是收缩。

7.非替换元素和替换元素的定位规则大不相同。这是因为替换元素有固定的高度和宽度，因此其大小不会改变，除非创作人员有意现实地修改。与非替换元素一样，如果值过度受限，用户代理会忽略right的值（对于从左到右读的语言）。

fixed:

position设为fixed时元素相对于浏览器窗口，因此滚动条拖动不影响其相对窗口的位置。但是fixed值在IE6下无效（图示6）

图示1----图示6的事例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Position</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
         <style type="text/css">
         .clearfix:after {
			clear: both;
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
		}
		.clearfix {
			display: inline-block;			
		}
		/* Hide from IE Mac \*/
		.clearfix {
			display: block;
		}
		/* End hide from IE Mac */
		.bg{
			background: #FFFFD0;
			height:100px;
			width:100px;
			float:left;
			border:1px solid #333;
		}
		.divBg{
			background: green;
			width:500px;
		}
		.box_relative {position: relative; left: 30px; top: 20px;}
		.box_absolute { position: absolute; left: 30px; top: 20px;}
		.box_fixed {position:fixed;left: 30px; top: 120px;}
		h2{
			color: red;
		}
		.divMPB div{
			
		}
		</style>
    </head>
    <body>
    	<h2>图示1</h2>
    	<div class="clearfix divBg">
    		<h4>static</h4>
    		<div class="bg">框1</div>
	    	<div class="bg">框2</div>
	    	<div class="bg">框3</div>
    	</div>
    	<hr>
    	<h2>图示2</h2>
    	<div class="clearfix divBg">
    		<h4>relative</h4>
    		<div class="bg">框1</div>
	    	<div class="bg box_relative">框2</div>
	    	<div class="bg">框3</div>
    	</div>
    	<hr>
    	<h2>图示3</h2>
    	<div class="clearfix divBg">
    		<h4>absolute,并且父级元素有设定position属性为static以外的值，相对body进行定位</h4>
    		<div class="bg">框1</div>
	    	<div class="bg box_absolute">框2</div>
	    	<div class="bg">框3</div>
    	</div>
    	<hr>
    	<h2>图示4</h2>
    	<div class="clearfix divBg" style="position: relative">
    		<h4>absolute,并且父级元素有设定position属性为relative</h4>
    		<div class="bg">框1</div>
	    	<div class="bg box_absolute">框2</div>
	    	<div class="bg">框3</div>
    	</div>
    	<hr>
    	<h2>图示5</h2>
    	<div class="clearfix divBg" style="position: relative">
    		<h4>absolute,并且父级元素有设定position属性为relative,所有div都为absolute</h4>
    		<div class="bg box_absolute" style="border: solid 5px blue;width:160px;height:140px;text-align: right">框1</div>
	    	<div class="bg box_absolute" style="border: solid 5px yellow;width:120px;height:120px;text-align: right">框2</div>
	    	<div class="bg box_absolute">框3</div>
    	</div>
    	<hr>
    	<br><br><br><br><br>
    	<h2>图示6</h2>
    	<div class="clearfix divBg">
    		<div class="bg box_fixed" style="background: red">Fixed</div>
    	</div>
    	<hr>
    	<h2>图示7</h2>
    	<div class="clearfix divBg" style="position: relative;padding-left:120px;margin:15px;border:5px solid #000;">
    		<h4>absolute,并且父级元素有设定position属性为relative,所有div都为absolute</h4>
    		<div class="bg box_absolute" style="border: solid 5px blue;width:160px;height:140px;text-align: right">框1</div>
    	</div>
    	<hr>
    	<h2>图示8</h2>
    	<span class="" style="position: relative;padding-left:120px;margin:15px;border:5px solid #000;">
    		absolute,并且父级元素有设定position属性为relative,所有div都为absolute
    		<div class="bg box_absolute" style="border: solid 5px blue;width:160px;height:140px;text-align: right">框1</div>
    	</span>
    </body>
    
</html>

参考文章：CSS权威指南（第三版）、精通CSS