固定定位、层级、透明度属性、定位居中方法的详解。

1、固定定位

    固定定位:
    语法：
    position：fixed;
    特点：
    1.不会随页面的内容滚动而滚动
    2.当只设置position: fixed;，没有设置偏移属性，此时对元素本身是有影响的
    3.参照元素:浏览器的四个窗口
    4.提升层级（在别的元素身上）(box2在box3的身上)
    5.脱离正常标准流，不占位，也就是飘起来了
    应用场景:
    固定的导航栏
    固定侧边栏

2、层级

相对定位、绝对定位、固定定位都可以提示元素的层级
​
    1.在层级一样的情况下，结构在后的层级高于结构在前的层级
    2.层级必须与定位position一块使用，否则不生效
    3.可以设置层级 z-index：n;
      层级默认值为0
      n可以为正数
            负数
              0
              不能为小数
​
    4.数值越大，层级越高
​
      /* 层级不能为小数 */
      z-index: 9.9;

3、透明度属性

1.rgba

​
 透明度属性
    rgba
    r:red  0-255
    g:green  0-255
    b:blue  0-255
    a:alpha  透明度
       0-1  半透明
       0    完全透明
       1    完全不透明
​
​
    应用于：
    背景颜色
    字体颜色
    边框颜色
​
​
  /* 透明度：1  完全不透明*/
      background-color: rgba(255, 255, 0, 1);
      /* 透明度：0  完全透明*/
      background-color: rgba(255, 255, 0, 0);
      /* 透明度：0.5  半透明*/
      background-color: rgba(255, 255, 0, .5);
      background-color: rgba(255, 255, 0, .9);
      background-color: rgba(255, 255, 0, .2);
​
      color: rgba(0, 0, 0,.5 );
​
      border: 10px solid rgba(0, 0, 0,.8);

2.opacity

opacity:透明度
    取值：
      0-1  半透明
       0    完全透明
       1    完全不透明
​
       注意：这个属性不仅自身透明，而且后代也透明，内容也透明
​
/* 自身及内容透明，后代也会透明 */
      /* 透明度 1  完全不透明*/
      opacity: 1;
      /* 透明度 0  完全透明*/
      opacity: 0;
      /* 透明度 .5  半透明透明*/
      opacity: 0.5;

4、定位居中方法

让元素实现水平居中垂直居中
类似于页面中的弹窗
​
1.需要设置宽高
2.设置绝对定位    position: absolute;
3.四个偏移属性值为0
4.设置margin:auto;
​
​
​
.wrap {
width: 400px;
height: 400px;
background-color: pink;
​
​
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/* auto  浏览器自动计算 */
​
}
​