了解CSS定位

CSS定位

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为。如当您想要需要对页面做一些细节方面的调整可以选择用定位的方式，从而不影响页面的布局。

1.静态定位

静态定位只是意味着将元素放入它在文档布局流中的正常位置，没有脱离文档流。

2.相对定位

相对定位依然没有脱离文档流，但是可以修改相对定位的位置（包括与其他元素重叠）。利用top，bottom，left和right属性可以使相对定位的元素进行移动。
body内容为：

  <div class="demo-box">
        <div class="demo-top"></div>
        <div class="demo-bottom"></div>
    </div>

css样式为：

	  .demo-box{
            border: 1px solid green;
            width: 300px;
        }
        .demo-top{
            width: 300px;
            height: 100px;
            background-color: red;
            /* position: relative;
            top: 70px; */
        }
        .demo-bottom{
            width: 300px;
            height: 100px;
            background-color: blue;
        }

运行的结果是这样的：

那么当您想要将红色div移动下来可以给css样式添加这个语句。

 position: relative;
 top: 70px;

很明显当红色div下移时，蓝色div变小，同时，您会发现绿色边框的高度没有发生任何变化。相对定位的元素不会影响父容器的大小和变化，但是相对定位元素的位置还是保留在哪里的。

3.绝对定位

会让元素脱离文档流 ，不占据页面位置。
例如当让红色div进行绝对定位时，css样式为：

   .demo-top{
            width: 300px;
            height: 50px;
            background-color: red;
           position: absolute;
        }

红色div将蓝色div盖住，并且父容器没有为红色div留出相应的位置。

4.固定定位

固定定位与绝对定位的方式相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的相对定位祖先，而固定定位固定元素则是相对于浏览器视口本身。