html中的定位及其定位方式

一.定位(position)

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

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

 -可选值：

static：默认值，元素没有开启定位

relative： 开启元素的相对定位

absolute： 开启元素的绝对定位

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

sticky： 开启元素的粘滞定位

二.定位方式

2.1   相对定位（relative）

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

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

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

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

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

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

通常偏移量只需要使用两个就可以对一个元素进行定位， 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

2.2绝对定位（relative）

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

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

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

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

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

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

正常情况下：

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

-定位情况下：

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

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

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

2.3绝对定位（fixed）

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

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

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

4.应用场景

固定导航,固定侧边栏,广告  

2.4粘滞定位（sticky）（一般用于页面导航的吸顶效果)

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

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

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

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

三.绝对定位元素布局

3.1水平布局

    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

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

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

      —两个auto的情况

          margin 和width为auto，  调整width

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

          width 和left，right其中一个值，不可同时设为auto

          left，right都为auto  调整right

      —三个auto的情况

        margin  width  left ===> width，left不可同时设为auto

        margin  width  right ===>  width，right不可同时设为auto

        width  left  right  ===>  width，right，left不可同时设为auto

      —四个值auto的情况

          width，right，left不可同时设为auto

3.2垂直布局

    等式也必须满足

  top+margin-top+····+botoom