CSS 的定位方式和含义

CSS 的定位方式和含义

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

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

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

<style>
  div {
    padding: 0;
    margin: 0;
  }
  #div0 {
    width: 200px;
    padding: 10px;
  }
</style>
<div id="div0" style="background-color: gray">
  div0
  <div id="div1" style="background-color: red">div1</div>
  <div id="div2" style="background-color: green">div2</div>
  <div id="div3" style="background-color: blue">div3</div>
</div>

得到的结果为：

通过使用元素的 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 定位，如下

<style>
  div {
    padding: 0;
    margin: 0;
  }
  #container {
    position: relative;
    padding: 30px;
  }
  #div0 {
    width: 200px;
    padding: 10px;
  }
  #div1 {
      position: absolute;
      top: 20px;
      left: 20px;
  }
</style>
<div id="container" style="background-color: cadetblue">
<div id="div0" style="background-color: gray">
  div0
  <div id="div1" style="background-color: red">div1</div>
  <div id="div2" style="background-color: green">div2</div>
  <div id="div3" style="background-color: blue">div3</div>
</div>
</div>

得到 div1 相对 container 的偏移定位

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

<style>
  div {
    padding: 0;
    margin: 0;
  }
  #div0 {
    width: 200px;
    padding: 10px;
  }
  #div1 {
    width: 100px;
    float: right;
  }
</style>
<div id="div0" style="background-color: gray">
  div0
  <div id="div1" style="background-color: red">div1</div>
  <div id="div2" style="background-color: green">div2</div>
  <div id="div3" style="background-color: blue">div3</div>
</div>

结果如下