定位

定位

1.属性是position
分为四种：

• 绝对定位：absolute

• 相对行为: relative

• 固定定位:fixed

• 粘性定位:sticky
  设置定位的定位元素，可以触发5个属性
  4个移动的方向 left,right,top,bottom
  1个层级关系 z-index(可以设置负值，值必须是整数，设置负数比普通元素层级低）

• 普通元素的层级比定位元素的层级低

• 后设置定位属性比先设置定位属性的层级高

• 只有定位元素可以用z-index强制提升层级

             普通元素  0     
             定位元素  0.1 ==》 0.2（看顺序）
  

相对定位
position:relative
1、相对定位的元素，没有脱离文档流，是占位的
2、位移是根据自己原位置移动
绝对定位
position:absolute
1、绝对定位的元素是脱离文档流，不占位
2、绝对定位的元素，先找最近的定位属性的祖先元素为参照物（定位属性推荐相对定位relative，但是绝对定位也可以，副作用大，平常不杂使用），进行位置移动,如果没有定位的祖先元素，就以当前的html网页为位置移动的参照物
包含块---绝对定位的参照物
固定定位
position:fixed
1、固定定位的元素也是脱离文档流，不占位
2、固定定位位置移动的参照物是html网页（当前网页的可视区）
3.当前网页的遮罩效果

  .contenner{
        width: 100%;
        height: 100%;
        background: rgba(40,40, 40, 0.5);
        position: fixed;
        left: 0;
        top: 0px;
    }

所有定位设置后可以按坐标移动，

• 左右为X

• 上下为Y

  粘性定位：sticky（兼容性要差一些）
  1.如果设置粘性定位，不设置方向，粘性定位是占位的，跟普通内容一样
  2.设置内容移动，设置方向属性，滚动条滑过内容，top和bottom的效果和固定定位一样，以浏览器窗口的可视区为参照物
  3.left水平方向，设置就管用，top垂直方向，滚动条划过内容才有效果
  注意：以下情况粘性定位会失效
  1、父元素不能overflow:hidden或者overflow:auto属性。
  2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
  3、父元素的高度不能低于sticky元素的高度
  4、sticky元素仅在其父元素内生效
  设置内容在当前网页水平垂直居中
  两种方法
  1：position：fixed
  left:50%
  right:50%
  margin-left:-(自身宽度的一半)
  margin-top:-(自身宽度的一半)

   right: 50%;
        bottom: 50%;
        margin-right: -100px;
        margin-bottom: -100px;
        /* left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px; */

2.position：fixed
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin:auto;
设置子元素在父元素下水平垂直居中
用绝对定位absolute设置
两种方式：
1.父元素 position:relative
子元素 position:absolute
left:50%
top:50%;
margin-left:-(自身宽度的一半)
margin-top:-(自身宽度的一半)
2. 父元素 position:relative
内容：position：absolute
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin:auto;