标签悬浮所有标签固定位置显示?
业务需求:按钮需要固定屏幕右下角显示!下面直接上解决方案
.fixed-z-index{
// fixed(固定定位)
position: fixed;
// 至于图层的最顶端
z-index: 9999;
// 相对于浏览器窗口底部的位置
bottom: 20px;
// 同上 相对于浏览器窗口右侧的位置
right: 170px;
}
理解参数的意义
- 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);
}
- border 边框
三个参数( border:边框宽度 边框样式 边框颜色)
边框样式可以设置为:dotted solid double dashed
=》点状 实线 双实线 虚线
- border-radius 边框圆角
border-radius: 10px; 设置圆角直径为10px - cursor 触碰到焦点事件
可参考:https://www.w3school.com.cn/tiy/t.asp?f=csse_cursor - box-shadow 设置盒子的阴影
可参考:https://www.w3school.com.cn/cssref/pr_box-shadow.asp