VUE-016-CSS 控制 div 层级显示为最顶层,CSS层级样式控制实例
2023-09-11 14:18:58 时间
在为博客添加侧边栏QQ、微信好友二维码和公众号推广二维码后,浏览自己博客文章,发现当博客文章存在插入代码时,代码层会遮挡好友二维码和公众号二维码信息,因而需要通过修改css控制div的显示层级,更好的展示好友和推广二维码信息。遮挡显示情况如下图所示:
css 通过设置 div 等标签的 style 样式(z-index),可实现控制标签的层级展示。 z-index 是垂直于电脑屏幕的层级控制,当 z-index 的值约大,相对应的图层离电脑前的用户观察者越近,层级里顶层越近。
此处需要好友和公众号二维码信息始终显示在页面的顶层(离用户观察者最近),因而在对应的层级样式中,将 z-index 设置为一个比较大的值,比如: 999,如下图所示:
保存后,重新刷新页面,可看到我博客文章页面的二维码信息正确显示。如下图所示:
后记:
z-index 控制标签的显示层级,因而也可用通过动态改变 z-index 的值,实现标签的页面动态展示控制。
相关文章
- Vue笔记:vue-router
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- Vue实例的生命周期(钩子函数)
- vue.js3:解析xml (x2js@3.4.3 / vue@3.2.37)
- Vue实例的生命周期(钩子函数)
- vue v-for打印九九乘法表
- 把vue项目或者html项目打包成桌面应用的简单方法:使用electron-packager打包electron应用
- vue脚手架基础demo1
- Vue服务端渲染Nuxt.js实例
- 计算机毕设 SSM Vue的教师工作考核绩效管理系统(含源码+论文)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 060:vue+openlayers鼠标dblclick 显示品牌代言人名片(示例代码)
- Vue八股笔记自用2
- vue 点击小眼睛 显示/隐藏
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 声纹可视化工具:wavesurfer.js---在Vue中使用音频声纹可视化插件wavesurfer.js【已封装成组件有完整demo实例附完整代码】
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)
- vue项目配置打包测试环境/生产环境