Giters

zhongxia245 / blog

这是一个Blog， 如果喜欢可以订阅，是Watch, 不是 Star 哈。。。

Home Page:https://zhongxia245.github.io/blog/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

【20170228】position:fixed 和 transform样式不得不说的秘密

zhongxia245 opened this issue · comments

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不起作用。

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">&times;</div>
    <h1>faksldjflkajsdkflja</h1>
    <h1>faksldjflkajsdkflja</h1>
    <h1>faksldjflkajsdkflja</h1>
     .... 
    这里还有很多 h1 自己添加
</body>

</html>