CSS定位

一.定位的概念

css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、left、bottom、right来调整元素位置

1.定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定

二.定位的四种属性

1.相对定位(relative)

1. 相对定位，如果没有偏移量（left/right/top/bottom）就是正常显示；
2. 根据原来的位置进行偏移
3. 不会使元素脱离文本流

	<style>
      div{
          position: relative;
          background-color: red;
          border-top:1px solid #000  
      	}
  </style>

2.绝对定位(absolute)

1.如果使用绝对定位，有定位祖先元素就相对于定位祖先元素发生偏移，没有定位祖先元素就会相对于整个文档发生偏移（绝对 相对 固定）
2.使元素脱离文档流和文本流

 B{
            position: absolute;
            border-top:1px solid #000;
            height: 100px;
            width: 100px;
            left: 30px;
            top: 30px;
            }

3.固定定位（position:fixed）

1.相对于整个窗口进行定位，不会受滚动条影响
2.使元素脱离文档流和文本流
3.固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。
另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。

4.粘性定位

sticky：(这是 css3 新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成 fixed 定位，相对于视口进行定位

1、父元素不能 overflow:hidden 或者 overflow:auto 属性。
2、必须指定 top、bottom、left、right4 个值之一，否则只会处于相对定位
3、父元素的高度不能低于 sticky 元素的高度
4、sticky 元素仅在其父元素内生效

三.z-index 设置元素的堆叠顺

z-index 的使用条件就是必须在使用了定位之后才可以生效
z-index属性是设置元素的层级，数值低的会被数值高的遮住