【20170228】position:fixed 和 transform样式不得不说的秘密
zhongxia245 opened this issue · 2 comments
zhongxia245 commented
时间:2017-02-28 18:32:17
作者:zhongxia
一、背景
项目中有一个功能,点击按钮,弹出一个弹窗,展示一张长图。 由于弹出弹框的时候,做了一个简单的动画。 弹窗慢慢从缩放大小变成正常大小。
tranform:scale(0) => transform:scale(1)
并且,弹窗是使用 position:fixed; ,并且弹窗的 关闭按钮页是 position:fixed 布局。
问题来了,为什么关闭按钮 随着滚动条而滚动了, WTF? 什么鬼情况。
二、问题
弹窗和关闭按钮代码如下
.modal-prize
position: fixed
top: 0
left: 0
bottom: 0
right: 0
background: rgba(0,0,0,0.5)
transition: all .3s ease-out 0s
transform: scale(0)
overflow: auto
img
width: 100%
.modal-prize__close
position: fixed
right: 0.1rem
top: 0.1rem
height 0.2rem
width: 0.2rem
line-height: 0.2rem
color: #EEE
font-size: 0.3rem
&:active
opacity: 0.85
.modal-prize--show
transform: scale(1)
经过测试发现,当 父容器为 transform 这个属性的时候, position:fixed不起作用。
zhongxia245 commented
来个实例代码:
可以注释 transform 来对比下结果
h1 标签自己添加多行,让容器出现滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<style>
.container {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: red;
overflow: auto;
transform: scale(1);
}
.close {
position: fixed;
top: 0;
right: 0;
font-size: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="close">×</div>
<h1>faksldjflkajsdkflja</h1>
<h1>faksldjflkajsdkflja</h1>
<h1>faksldjflkajsdkflja</h1>
....
这里还有很多 h1 自己添加
</body>
</html>
zhongxia245 commented
可以参考以下文章,看看具体为什么这样