【CSS】标签悬浮

标签悬浮所有标签固定位置显示？

业务需求：按钮需要固定屏幕右下角显示！下面直接上解决方案

.fixed-z-index{
	// fixed（固定定位）
    position: fixed;
    // 至于图层的最顶端
    z-index: 9999;
    // 相对于浏览器窗口底部的位置
    bottom: 20px;
    // 同上 相对于浏览器窗口右侧的位置
    right: 170px;
  }
           

理解参数的意义

1. position

   position的四个属性值relative,absolute,static,fixed

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4、

fixed

（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

附赠圆角阴影按钮

.fixed-z-index_btn{
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
  }
           

1. border 边框

   三个参数（ border：边框宽度 边框样式 边框颜色）

   边框样式可以设置为：

   dotted solid double dashed

   =》

   点状 实线 双实线 虚线

2. border-radius 边框圆角

   border-radius: 10px; 设置圆角直径为10px

3. cursor 触碰到焦点事件

   可参考：https://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

4. box-shadow 设置盒子的阴影

   可参考：https://www.w3school.com.cn/cssref/pr_box-shadow.asp

效果如下