CSS position属性整理详解

在css布局中position的使用非常广泛。在一些面试题目中也会常见到position的问题。所以在这篇博客里面整理一下position属性的使用，在以后的深入学习中还会在补充的。

1.position有哪些属性？

static：所以元素的默认定位是position：static，这意味着元素没有被定位，元素出现在正常流中。

relative：生成相对定位的元素，相对于其正常位置定位，还占有原来的位置，元素通过top,right,left,bottom属性进行规定。

absolute：生成绝对定位的元素，相对于第一个position不为static的父级元素进行定位，脱离文本流。元素通过top,right,left,bottom属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，脱离文本流。元素通过top,right,left,bottom属性进行规定。（IE6不支持）

inherit：规定应该从父元素继承position属性的值。

2.position 与containing block的关系。

（1）containing block详解。

定义：

The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.

一个元素的盒模型的定位、尺寸常常会依据某个矩形(box)来计算，这个矩形就叫做这个元素的包含块（containing block）。

看例子来吧。

<div class="bg">
	<table>
		<td>hello world</td>
	</table>
</div>

div是table的包含块。table是td的包含块。不是绝对的。

（2）position与containing block

在网上找了这张图

• 如果该元素的position为 relative或者 static，它的包含块由它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的 内容框创建。元素如果未声明 ‘position’ 特性，那么就会采用 ‘position’ 的默认值 “static”

  <table id="table1">
  	  <tr>
  	    <td id="td1">
  	      <div id="div1" style="padding:20px;border:1px solid red;">
  	        <span> <strong id=”greed” style="position:relative;">greed is</strong> fsdfd</span>
  	      </div>
  	    </td>
  	  </tr>
  </table>
  

  strong元素的position为relative，它的包含块由div1创建。span 元素中包含的文本在 div1 中的位置可以看出，div1 创建的包含块的区域是它的内容边界，也就是内边界。

• position: absolute元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。
  • 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 ‘direction’ 特性
  • 其他情况，包含块的区域取决于其祖先元素的内边距边界。
• position：fixed元素的包含块就是当前可视窗口。