CSS基础-----定位（position）

定位是CSS布局中非常重要的一环，利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素或者相对于浏览器窗口本身

---

Position

        值：static | relative | absolute | fixed | inherit

       初始值：static

       应用于：所有元素

       继承性：无

       计算值：根据指定确定

---

        static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

        relative:元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

        absolute：元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

        fixed:元素的表现类似于将position设置于absolute，不过其包含块是视窗本身

---

包含块

在定位中，包含块包括几种情况：

1. 在HTML中，根元素就是html元素，在大多数浏览器中，初始包含块（根元素）是一个视窗大小的矩形
2. 对于非根元素，则看其定位元素是relative或static，absolute
   1. relative或static：包含块是由最近的块级框、表单元格或行内块祖先框的内容边界构成
   2. absolute：包含块设置为最近的position值不是static的祖先元素
      1. 祖先是块级元素，包含块则设置为该元素的内边距边界
      2. 祖先是行内元素，包含块则设置为该祖先元素的内容边界
      3. 如果没有祖先，元素的包含块定义为初始包含块
3. 元素可以定位到其包含块对的外面（使用负值）

---

偏移属性

三种定位机制（relative、absolute、fixed）需要依赖偏移属性（offset）来实现，这对于完成定位是非常重要的一环

                                                     top、right、bottom、left

             值：<length> | <percentage> | auto | inherit

            初始值：auto

           应用于： 定位元素

           继承性：无

           百分数： 对于top和bottom，相对于包含块的高度；对于right和left，相对于包含块的宽度

           计算值：对于相对定位元素，对于static元素为auto；对于长度值，是相应的绝对长度；对于百分数值，则为指定的值；否则则为auto

偏移属性定义了距离包含块相应边的偏移，而不是包含块左上角的偏移