一、元素的定位

当盒子在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

在CSS中，通过边偏移属性top.bottom.left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对它们的具体解释如下表所示。

（1）静态定位static

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

在静态定位状态下，无法通过边偏移属性（top.bottom.left或right）来改变元素的位置。

（2）相对定位relative

相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

（3）绝对定位absolute

绝对定位是将元素依据最近的已经定位（绝对.固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

（4）固定定位fixed

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

      当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

（5）z-index层叠等级属性

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数.负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

 注意： z-index属性仅对定位元素有效。

二、元素的类型与转换

HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用CSS设置样式和布局打下基础，具体如下：

（1）块元素：块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度.高度.对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等，其中<div>是最典型的块元素。

（2）行内元素：行内元素的特点是和它前后的其他行内元素显示在同一行中，仅仅靠自身的字体大小和图像尺寸来支撑结构，常用于控制页面中文本的样式。

常见的行内元素有<strong>.<em>.<i>.<img>.<u>.<a>.<span>等，其中<span>标记是最典型的行内元素。  

如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元素的类型进行转换。

display属性常用的属性值及含义如下：

inline：此元素将显示为行内元素（行内元素默认的display属性值）。

block：此元素将显示为块元素（块元素默认的display属性值）。

inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。

 none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

三、扩展阅读

1.CSS之使用display:inline-block与float布局的区别

2.视频资源：CSS定位属性