css的定位分类及特殊的定位

含义：让元素去某一个位置显示，需要添加对应的距离（偏移属性）；通过偏移属性才能让一个元素去某一个位置显示
要想使用定位，并且让元素移动的话需要添加偏移属性。
属性：position

静态定位

普通文档流定位的默认值，元素是怎么排列就怎么显示
 取值：static；

相对定位

 相对于自己的位置进行微调，简单的十几个像素的位置调整
 取值：relative
 参照物是自己原来的位置
 top：50px 距离原来位置的上面有50个像素的距离。
 应用场景：

绝对定位

    取值：absolute
    父相子绝
    1）子元素添加绝对定位，父元素没有任何定位的话，子元素的位置相对于浏览器窗口左上角的body位置进行调整
    2）子元素添加绝对定位，父元素是相对定位，子元素的位置相对于父元素的左上角进行调整。

固定定位

position：fixed；
位置调整**始终相对于浏览器屏幕的左上角进行调整**，不会受到滚动条的影响
应用：流氓广告，返回置顶，楼梯电梯层效果，文章的目录，遮罩层效果。

粘性定位

    滚动吸顶效果：是固定定位和相对定位的结合体
   取值：sticky
    应用：滚动吸顶

定位怎么偏移
使用top、left、bottom、right这四个属性

定位使用的特殊情况

1）什么时候使用何种定位（排除法）

    静态定位======默认的普通文档流定位，不使用
    
    粘性定位======只做一个滚动吸顶的效果，需要和js使用
    固定定位======广告栏，返回置顶，小说目录，购物车删除的时候。遮罩层效果
    相对定位=======仅限于元素位置的微调10px就可以
    绝对定位=======使用的时候，父元素会带上相对定位，轮播图的方向键。

2）定位的特殊情况1

 所有的元素=====兄弟元素都添加定位的话，会实现什么效果
 如果所有的元素都添加同样的定位的话，默认的后面盖住前面的元素。
 产生的遮盖效果称为层叠性。
 ======产生遮盖效果后，不想让后面的盖住前面的，====+引出如何调整层级顺序。
 使用z-index属性调整，默认值为auto即为后面遮盖前面的（取值为0）；
 z-index取值可以为正数，也可以为负数。取值越大层级越高。
 z-index必须应用在有定位的元素上面。

3）定位的特殊情况2

  高度的塌陷问题====定位也可以产生高度塌陷。
  相对定位不会产生高度塌陷的问题。
  **绝对定位，固定定位会产生高度塌陷，解决办法**：
  1.添加高度。
  2.使用js解决高度塌陷
  后面的元素会上去补位，类似于浮动的效果。

4）定位的特殊情况3

  父子关系的绝对定位使用的过程中，即父相子绝，问题：父元素能否使用其他定位
  能使用，但是不建议使用。能使用相对、绝对、固定、粘性
  为啥使用相对呢？因为绝对、固定会让margin：0 auto失效

5）定位的特殊情况4

margin：0 auto的问题。只针对于有宽度的元素实现元素水平位置居中，添加定位之后不会受到影响。
   relative不会影响到margin：0 auto；
   sticky不会影响到margin：0 auto；
   absolute、fixed会影响。

6）定位的特殊情况5

   给宽度自适应的盒子添加定位的效果。
   什么是宽度自适应：不给块级元素添加宽度就是宽度自适应。
      witdh：auto；
      给自适应的盒子添加相对定位的话，不会影响盒子的宽度。
      给自适应的盒子添绝对定位或者是固定定位，盒子仍然是自适应的，自适应是由文本或者是子元素撑开的。

浮动和定位的对比

 1）不同点：
      1）概念不同：浮动应用于横向布局，用来区块划分的，左中右布局。定位是用来调整元素位置的，虽然说也能实现横向布局，但是定位是调整位置，属于布局中的一种方法。
      2）实现的效果不同：脱离文档流的效果不同
           如果补位元素中没有任何文本的话，会实现效果一样的情况。
           如果补位元素中有文本的话实现效果不一致。浮动：元素会上去补位，但是补位中的元素文本会出现环绕效果。
           定位：元素会上去补位，但是不会出现环绕效果，是直接被前面的元素遮盖。‘
 2）相同点
      1）补位元素中没有任何文本的话实现的补位效果一致
      2）都会产生高度塌陷
      3）让元素变成块级元素
      4）都会让margin：0 auto失效。
      5）添加浮动和定位（绝对，固定）的时候都会让自适应的盒子的宽度仍然处于自适应状态，是被文本撑开的。
      6）都能解决margin-top作用在父元素上面的问题：触发BFC。

8）元素的水平垂直居中

1）元素位于浏览器屏幕中的水平垂直居中

div{
width：500px;
height:300px;
background-color:orange;
position:absolute;
left:50%;
top:50%;
margin-top:-150px;
margint-left:-250px;
}

注意：实际开发的时候大部分使用的是固定定位，不会受到滚动条的影响。
2）元素位于父元素里面的水平垂直居中

父元素{postion：relative;}
子元素{
     width：200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-高度的一半;
     margin-left:-宽度的一半;
}

9)父相子绝

问题：给孙子添加绝对定位，父亲没有定位，爷爷有一个相对定位======孙子的参照物是爷爷还是浏览器窗口左上角？
遵循就近原则：爷爷