css中z-index失效的问题

今天用css做一个效果在本地文件的时候是可以实现的,但是在Vue框架的时候就不会出现的大BUG,因为Vue的节点都是渲染出来的,在以下情况会导致z-index失效

父标签 position属性为relative;

问题标签无position属性(不包括static);

问题标签含有浮动(float)属性。

解决这类问题的方法就比较残忍了,也是三种方式

position:relative改为position:absolute;

浮动元素添加position属性(如relative,absolute等);

去除浮动。

这也是学习中遇到的一个大坑了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,596评论 1 45
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5
  • float float 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流...
    Promise_4483阅读 342评论 0 0
  • 1,早起早睡 本周基本在5:20前起,早睡还需加强,有1天在12:00才睡。有2天在11点才睡。但不管多晚睡,早...
    kate98阅读 225评论 0 0