position absolute relative fixed float

CSS中的定位（ position属性 ）

Posted by Nutlee on 2016-05-10

HTML标签通常通过CSS的position属性进行定位设置，其中当值为absulute时是一种非常灵活的定位方式（性能较差？有待求证），可以这么说，搞清楚position属性基本上就能完成HTML的总体布局。

position属性的值主要有static、relative、absolute、fixed ( 不考虑initial和inherit )。

下面依次展开介绍

1.static

默认值，遵循正常文档流。

此时 top/right/bottom/left 属性均无效。

2.relative

相对定位，与absolute并不是相对关系。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
	.warp {
		width:300px;
		height:200px;
		background-color: #ccc;
	}
	.box {
		position: relative; 
		top: 40px;
		left: 50px;
		width: 100px;
		height: 100px;
		background-color: yellow;
		/* 为直观展示，设置透明度 */
		opacity: 0.7;
		filter: Alpha(opacity=70);
	}
</style>
<div class="wrap">wrap
	<div class="box">box</div>
	此文字并不会占据位置relative元素本应该在文档流中的位置
</div>
wrap
box
此文字并不会占据位置relative元素本应该在文档流中的位置

如上图，此时 top/right/bottom/left 相对元素本应该在文档流中所处的位置定位，其层叠通过z-index属性定义。

注意：元素还在文档流中，并且仍占据原来位置（即wrap内的左上角），也就是说其他处于文档流中的元素也不会占据其位置。

3.absolute

绝对定位，具有和设置z-index相同的效果，完全脱离文档流，“ 最佳布局 ”

  • 只设置 position:absolute 且没有任何 top/right/bottom/left 或 margin 属性，元素会表现为z-index: x ，即：“跳出”文档流。

  • 如图，position:absolute后，此时 top/right/bottom/left 是相对 最靠近元素且 “ position不为static ” 的父容器的border 定位的，也就是说该父容器内的padding不会对定位造成任何影响，并且 完全脱离文档流，即文档流中的其他元素可以占据他的位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style>
    	.warp {
    		position: relative;
    		width:300px;
    		height:200px;
    		background-color: #ccc;
    	}
    	.box {
    		/* 可以尝试去掉 absolute 看元素本来所处的位置 */
    		position: absolute; 
    		top: 40px;
    		left: 50px;
    		width: 100px;
    		height: 100px;
    		background-color: yellow;
    		/* 为直观显示，设置透明度 */
    		opacity: 0.7;
    		filter: Alpha(opacity=70);
    	}
    </style>
    <div class="wrap">wrap<br/>
    	<div class="box">box</div>
    	此文字并不会占据位置relative元素本应该在文档流中的位置
    </div>
wrap
box相对不为static的父容器border定位
此文字会占据absolute元素本应该在文档流中的位置

  • 如图，若 position:absolute 后并没有 top/right/bottom/left ，只有 margin 属性，则元素表现 “跟随” 特性，即：处在本应该在文档流的位置，但是脱离了文档流，相当于relative 和 z-index 共同作用。利用“跟随”特性，可非常灵活的做突破一些区域的定位，如右上角角标。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style>
    	.warp {
    		position: relative;
    		width:300px;
    		height:200px;
    		background-color: #ccc;
    	}
    	.box {
    		/* 可以尝试去掉 absolute 看元素本来所处的位置 */
    		position: absolute; 
    		margin-top: 40px;
    		margin-left: 50px;
    		width: 100px;
    		height: 100px;
    		background-color: yellow;
    		/* 为直观显示，设置透明度 */
    		opacity: 0.7;
    		filter: Alpha(opacity=70);
    	}
    </style>
    <div class="wrap">wrap<br/>
    	<div class="box">box</div>
    	此文字并不会占据位置relative元素本应该在文档流中的位置
    </div>

wrap
box相对原位置定位
此文字会占据absolute元素本应该在文档流中的位置

注意

  • absolute 元素的 top/right/left/bottom 同时设置时，只有top/left 生效。

  • position: absolute 会隐式 display: inline-block;(float: left/right 也会执行此隐式操作)。

  • 通常情况下，设置 positon: absolute 后不需要手动设置 z-index，遵循的规则为：后一个absolute元素的z-index等于前一个absolute的z-index+1，特殊情况下需手动设置”z-index: 999”或“z-index: -1”。

4.fixed

固定定位，相对于视口定位。

通常用来做在窗口中始终固定的button、bar。

注意：fixed相当于一种特殊的absolute，在移动浏览器对fixed支持很差，可以用absolute来解决。

PS：

文档流

在窗口中，每行按照自上而下，行内元素从左到右的排列规则，即文档流，正常的文档流应该是文档节点的加载顺序、渲染顺序和视觉上的呈现顺序结构一致。布局中，我们应该尽量不破坏文档流。

脱离文档流的两种方式：浮动和定位（特指absolute）

CATALOG
    FEATURED TAGS
    position absolute relative fixed float
    FRIENDS