css，相对定位

相对定位

布局方式:文档流、浮动、定位等

面试题：请你说一说定位的种类？

定位：是一种布局手段，而且它是一种高级的布局手段，可以将页面中的任何元素放在页面中的任意位置

通过position属性进行设置

可选值:

static     默认值 不开启定位

relative   开启 *相对定位

absolute  开启  绝对定位

fixed     开启  固定定位

sticky    开启  粘滞定位

①相对定位position: relative;

left,right,top,bottom相对于定位位置向一侧移动

开启后特点:

1 开启了相对定位后，如果不配合偏移量使用，元素不会发生任何变化

2 相对定位，是相对于元素原来在文档流中的位置定位

3 开启了相对定位后，元素的层级会变高，也就是会盖住其他的元素

4 开启了相对定位后，元素的性质不会发生变化，也就是块还是块，行内还是行内

一般情况下，设置偏移量，left或right、top或bottom只调动一个值，即left和right不能都设置

      .box1{

        position: relative;

        left: 10px;

        top: 50px;

      }

 ②绝对定位position: absolute;

开启后特点：

1 开启了绝对定位，如果不配合偏移量使用，元素的位置没有发生变化

2 开启了绝对定位后，元素会脱离文档流，下面的元素就会跑上去

3 开启了绝对定位，元素脱离文档流，会改变元素性质

不再分块、行内、行内块，即块元素不会独占一行，行内元素可以设置宽高

4 绝对定位的原点，是相对于其包含块来确定的

  一般情况下，如果设置子元素为绝对定位，同时设置其父元素相对定位，

以便设置偏移量，这种情况叫“子绝父相”

但最终还是要根据如何方便设置子元素偏移量为准。

5 开启了绝对定位，元素会提升一个等级

 ③固定定位 position：fixed；

开启后的特点

1 开启固定定位后，元素会脱离文档流，元素的性质会发生改变

2 开启固定定位后，元素会固定在页面中，不会随着滚动条滚动而滚动

3 开启固定定位后，也需要配合偏移量，来改变元素在页面中位置

4 固定定位的原点是html根标签,也就是浏览器视口

常用的场景

1 固定的侧边导航

2 固定的广告

3 固定的顶部、底部导航

 ④粘滞定位 position: sticky;

开启后的特点：

1 开启粘滞定位，元素不会脱离文档流，即元素性质不会发生改变

2 开启粘滞定位后，元素位置不发生改变，需要配合偏移量使用

3 粘滞定位是后来增加的定位方式，注意它的兼容性，一般兼容到ie9以上

4 粘滞定位的原点也是浏览器视口，也就是html根标签     

主要的应用场景

1 侧边导航

2 广告

3 顶部导航，底部导航

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

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

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

（2）占有原来位置（体现相对定位特点）；

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

（4）没有达到top值之前正常显示，达到top值之后类似于固定定位，

不会跟随滚动条滚动而滚动

面试题：让元素水平垂直居中，请你列举几种方式 

  第一种方式：

   元素会水平垂直居中

   前提在绝对定位的情况下，四个方向偏移量以及元素内容区宽高都是固定值

   让margin为auto

在定位情况，元素的水平方向，增加了两个值 ，从原来的7个值变为9个值

  但依然遵循过度约束的原则，即水平方向9个值相加必须要等于其父元素内容区的宽度

  如果不等于的话，浏览器就会进行约束调整：

  left margin-left border-left padding-left width

      padding-right border-right margin-right  right

  0 0 0 0 100 0 0 0 0 =400

      如何调整：

1 如果9个值中没有auto，调整的就是right

2 如果有auto，9个值当中，有left margin width right 4个值可以设置auto

  1个auto

   left  margin width right 中设一个auto，其他的值为固定值

   浏览器就调整这个auto

  2个auto

   left margin  调整的就是left

   left width   调整的就是left

   left right   调整的就是right

   margin width   调整的就是width

   margin right   调整的就是right

   width right   调整的就是right

  3个auto

   left  margin width   调整的就是left

   left  margin  right  调整的就是right

   margin width right    调整的就是right

  4个auto

    left  margin width right   调整的就是right

总结：

    1 如果9个值当中，没有auto，调整的就是right

    2 如果9个值当中，有auto，调整的顺序

      right>left>width>margin

    3 在绝对定位的情况，如果right，left，top，bottom，width为固定值

      margin为auto，元素就会水平垂直居中