云南网站建设公司排名独立站网站
CSS 的定位方式和含义
总结一下 CSS 的定位方式。CSS 的定位 position 是处理页面布局时非常重要的属性。
CSS 中有 3 种基本的定位机制：普通流、浮动和绝对定位。
在没有指定的情况下，所有的 CSS 元素都在普通流中定位，在这种模式下，元素的位置由于浏览器根据元素在 html 文档中的位置决定，块级元素从上到下排列，行内元素水平排列。
div {
padding: 0;
margin: 0;
}
#div0 {
width: 200px;
padding: 10px;
}
div0
得到的结果为：
通过使用元素的 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 相对 container 的偏移定位
float 会使框进行浮动，向左或向右，直到碰到它包含框的边缘，元素不占用文档流的空间。如下
div {
padding: 0;
margin: 0;
}
#div0 {
width: 200px;
padding: 10px;
}
#div1 {
width: 100px;
float: right;
}
div0
结果如下