html：对于定位的初步认知

通过前面几天的学习我们已经掌握了三种布局手段：margin  浮动  定位，今天来让我们了解第四种布局手段:定位。

什么是定位

1.定位更加高级的布局手段

2.定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。

3.通过position属性来设置元素的定位

        可选值：         

          static： ['stætik] 默认值，元素没有开启定位

          relative： ['relətiv] 开启元素的相对定位

          absolute： ['æbsəlju:t] 开启元素的绝对定位

          fixed：开启元素的固定定位（也是绝对定位的一种）

          sticky： ['stiki] 开启元素的粘滞定位

定位的种类

1、相对定位(relative)

什么是相对定位？

        当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

      1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。

      2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）。

      3.相对定位的元素不会脱离文档流。

      4.相对定位会使元素提升一个层级。

      5.相对定位不会改变元素的性质，块还是块，内联还是内联。

偏移量

       当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动。

      left：元素向右偏移量，

      right：元素向左偏移量

      top：元素向下偏移量

      bottom：元素向上偏移量

注:1.可设正值，也可设负值

     2.通常偏移量只需要使用两个就可以对一个元素进行定位，

      一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。

2.绝对定位（absolute）

什么是绝对定位？

当position属性值设置为absolute时，则开启了元素的绝对定位

1.开启绝对定位，会使元素脱离文档流

2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素

3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

4.绝对定位会使元素提升一个层级

5.绝对定位是相对于离他最近的包含块定位的

注：一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

包含块（containing block）

正常情况下：

    离当前元素最近的祖先块元素

定位情况下：

    离他最近的开启了定位的祖先元素

    如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

    html （根元素，初始包含块）

3.固定定位（fixed）

什么是固定定位？

当元素的position属性设置fixed时，则开启了元素的固定定位

  （1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

  （2）以浏览器为参照物，和父元素没有任何关系；

 （3）固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质

    (4)应用场景

        - 固定导航

        - 固定侧边栏

        - 广告  

4.粘滞定位（sticky）

什么是粘滞定位？

 粘滞定位 ，一般用于页面导航的吸顶效果

 当元素的position属性设置为sticky时，则开启了元素的粘滞定位

    （1）以浏览器为参照物（体现固定定位特点）；

    （2）占有原来位置,不会脱离文档流（体现相对定位特点）；

　（3）粘滞定位可以在元素到达某个位置时，将其固定

      (4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

绝对定位的元素布局

 水平布局

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

 一、当开启决定定位后，水平方向的布局等式就会加上left，right两个值

      此时规则和之前一样，只是多添加了两个值

二、 当发生过度约束时

            1:如果9个值中没有auto，则自动调整right值以使等式满足

            2:如果有auto，则自动调整auto的值以使等式满足

 三、可设置auto的值

          margin  width  left  right

      1.四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

            若width为固定值  left  right top bottom都为0，margin会均分四个方向值

          从而使元素达到水平垂直居中  ****

      2.两个auto的情况

          margin 和width为auto，  调整width

          margin 和left，right其中一个值为auto，调整left或right

          width 和left，right其中一个值， 调整left或right

          left，right都为auto  调整right

      3.三个auto的情况

        margin  width  left ===> 调整left

        margin  width  right ===>  调整right

        width  left  right  ===>  调整right

      4.四个值auto的情况

          width，right，left  margin  调整right

       总结：right>left>width>margin    ****

垂直布局

        等式也必须满足

       总结：  bottom>top>height>margin  ****

层级以及透明效果的设置

1:如果定位元素的层级是一样，则下边的元素会盖住上边的

  通过z-index属性可以用来设置元素的层级

  可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级

   层级越高，越优先显示

  对于没有开启定位的元素不能使用z-index

2、设置元素的透明背景

 opacity [əu'pæsiti] 可以用来设置元素背景的透明，

   它需要一个0-1之间的值

     0 表示完全透明

     1 表示完全不透明

     0.5 表示半透明

  注：opacity与rgba设置透明度，两者的区别

  1、opacity属性，rgba样式值

  2、rgba样式值一般必须跟在特定的属性后，例如背景色，颜色

       opacity 可以任意设置

  3、继承性

       opacity属性，有样式的继承

       rgba样式值  各设各的