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

zhongxia245 · 2017-02-28T10:31:15Z

时间：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 · 2017-02-28T10:38:55Z

来个实例代码：

可以注释 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>

zhongxia245 · 2017-02-28T10:44:02Z

可以参考以下文章，看看具体为什么这样

zhongxia245 changed the title ~~【20170228】position:fixed 和 transform：scale(1) 的问题~~ 【20170228】position:fixed 和 transform样式不得不说的密码 Feb 28, 2017

zhongxia245 changed the title ~~【20170228】position:fixed 和 transform样式不得不说的密码~~ 【20170228】position:fixed 和 transform样式不得不说的秘密 Feb 28, 2017

zhongxia245 closed this as completed Feb 28, 2017

zhongxia245 added the CSS label Feb 28, 2017

zhongxia245 reopened this Feb 28, 2017

zhongxia245 closed this as completed Jul 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

zhongxia245 commented Feb 28, 2017 •

edited

Loading

zhongxia245 commented Feb 28, 2017 •

edited

Loading

zhongxia245 commented Feb 28, 2017 •

edited

Loading

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

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

Comments

zhongxia245 commented Feb 28, 2017 • edited Loading

一、背景

二、问题

zhongxia245 commented Feb 28, 2017 • edited Loading

zhongxia245 commented Feb 28, 2017 • edited Loading

zhongxia245 commented Feb 28, 2017 •

edited

Loading

zhongxia245 commented Feb 28, 2017 •

edited

Loading

zhongxia245 commented Feb 28, 2017 •

edited

Loading