这是一个我不太了解的关于z-index和css伪元素:: before / :: after的行为.
它在这个jsfiddle:http://jsfiddle.net/jgoyon/T6QCf/上有说明
我创建了一个定位框并使用:: after伪元素添加内容(也定位).
>如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下
#no-z-index { background:lightblue; width:100px; height:100px; position:relative; } #no-z-index:after { content: 'z-index -1'; width:50px; height:50px; background:yellow; position:absolute; z-index:-1; /* z-index in question */ top:70px; left:70px; }
>如果我这样做并设置父级的z-index,它就不再起作用了.
#z-index { background:lightblue; left:200px; width:100px; height:100px; position:relative; z-index:0; /* parent z-index */ } #z-index:after { content: 'z-index -1'; width:50px; height:50px; background:yellow; position:absolute; z-index:-1; /* z-index in question */ top:70px; left:70px; }
这是预期的行为吗?
解决方法
原文地址:https://www.jb51.cc/css/214024.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。