CSS 的定位方式和含义

CSS 的定位方式和含义

总结一下 CSS 的定位方式。CSS 的定位 position 是处理页面布局时非常重要的属性。

CSS 中有 3 种基本的定位机制：普通流、浮动和绝对定位。

在没有指定的情况下，所有的 CSS 元素都在普通流中定位，在这种模式下，元素的位置由于浏览器根据元素在 html 文档中的位置决定，块级元素从上到下排列，行内元素水平排列。

div0

div1

div2

div3

得到的结果为：

通过使用元素的 CSS 的 position 属性，常用 4 种定位：static、relative、absolute、fixed ，以及一个浮动定位属性 float。

static 是默认的定位方式，即不对元素进行特殊的定位，由浏览器按照文档的处理进行自动定位。

relative 相对定位，元素从原始位置偏移某个距离，但仍然占用原来的空间。 div1 使用 relative 定位，进行向下向右偏移，如下

div1 {

position: relative;
top: 20px;
left: 20px;
}

div1 仍然占用原来的空间，但位置已在原来的位置上进行了偏移，得到的结果为:

fixed 定位总是相对视窗的位置来定位，并且从文档流中脱离，会在页面的滚动时保留在相对视窗的位置，如下

div1 {

position: fixed;
top: 20px;
left: 20px;
}

得到的结果为:

absolute 绝对定位，会把元素从正常文档中所占的空间关闭，然后相对其最近的某个已经进行过定位的祖先元素进行定位。如果祖先元素中没有进行过 position 的定位，那么就会相对 body 进行定位。进行 absolute 定位之后，元素总是生存一个块级框，不论原来是什么类型的元素。修改原来的文档，加上 div container ，定位为 relative ，处理 div1 ，使用 absolute 定位，如下

div0

div1

div2

div3

得到 div1 相对 container 的偏移定位

float 会使框进行浮动，向左或向右，直到碰到它包含框的边缘，元素不占用文档流的空间。如下

div0

div1

div2

div3

结果如下