css 定位连线_CSS 的定位方式和含义

CSS 的定位方式和含义

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

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

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

div {

padding: 0;

margin: 0;

}

#div0 {

width: 200px;

padding: 10px;

}

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 定位，如下

div {

padding: 0;

margin: 0;

}

#container {

position: relative;

padding: 30px;

}

#div0 {

width: 200px;

padding: 10px;

}

#div1 {

position: absolute;

top: 20px;

left: 20px;

}

div0

div1

div2

div3

得到 div1 相对 container 的偏移定位

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

div {

padding: 0;

margin: 0;

}

#div0 {

width: 200px;

padding: 10px;

}

#div1 {

width: 100px;

float: right;

}

div0

div1

div2

div3

结果如下