css样式问题

先贴HTML片段代码：

<div class="testAnimation">
  <div class="mask"></div>
</div>

然后CSS片段代码：

 1     div.testAnimation{
 2       width: 400px;
 3       height: 300px;
 4       background: red;
 5       transform:translateX(-100%)
 6     }
 7     .testAnimation{
 8       animation-name:flyIn;
 9       animation-fill-mode: forwards;
10       animation-duration: 1s;
11     }
12     @keyframes flyIn {
13       0%{
14         transform:translateX(-100%);
15       }
16       100%{
17         transform:translateX(0);
18       }
19 
20     }
21     .mask{
22       position: fixed;
23       top:0;
24       left:0;
25       right:0;
26       bottom:0;
27       background: rgba(0,0,0,0.6);
28     }
29     body{
30       background: yellowgreen;
31     }

效果如下：

 

居然fixed定位居然只遮罩到父元素，百思不得啊。在自己项目中，由于DOM复杂，CSS样式也是各种各样。很是痛苦啊，最后不得把动画换成animate.css.抱着不死心的小强

最后发现标准早就说清楚了。。。。。

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。

当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

 

具体可以参考：https://github.com/chokcoco/iCSS/issues/24

 

posted @ 2017-12-04 22:01  牛奶007  阅读(92)  评论(0)    收藏  举报

hello world!