为什么给我的女神送花这么难？？（Transform 和z-index的爱恨情仇）

今天在调试一个前端项目时碰到一个贼尴尬的问题：

今天老师让做一个送花的前端项目，就是一个男孩跑到女孩面前送花的纯css项目

 

本来这项目就要完成的，可是就在这时，，我发现了一个严重的问题

花的z-index无论我怎么设置它都只能只能贴在手上，不能设置到右手的下面！！感觉就是绑着的一样

 

 

 

按我一贯的作风！！！！

额，，可惜我找了好久。。。大部分都说是：

z-index在什么情况下会失效？

没有设置position属性

父元素的position属性设置为relative

问题标签的float属性与z-index冲突

当前标签的父(祖先)标签的z-idnex值过大或过小

 

*********************************************************************

在我把这些问题一个一个找来查看排除后！！！我发现我的问题压根就跟这些无关！！！

 

 

查资料找了好久，以及各种尝试，，，我终于发现了！！！！！！

我的问题是：

CSS3 Transform 引起的 z-index "失效"

专业来说就是这两个混用会右一定问题

这里涉及到一个stacking context（有人翻译为层叠上下文）的概念。

给元素设置transform属性会创建一个新的stacking context。

 

 

 

当上图的inner有这个transfrom时就会导致里面元素的z-index失效！！！

.inner {
    width: 80px;
    height: 80px;
    transform: scale(1); /*此处会产生新的stacking context*/
    background: green;
}

 

 

至于如何解决？？？

暂时没有办法！！！！！！！！！！！！！！！

 

 

 

我只能换个手拿花了！！！！！！

 

 

 

 

然后让手里的适合的时间消失！！！

这就完成了！！

纯css

希望能帮助到和我有一样问题的朋友！！分享精神