position:fixed+transform 导致的fixed失效,不知有没有办法解决?

okfine
  • 489

问题描述

position:fixed + transform 导致的fixed失效,不知有没有办法解决?

问题出现的环境背景及自己尝试过哪些方法

浏览期打开http://jsfiddle.net/qc9ovsL0/3/ 可查看问题。
fixed定位的元素,因为在vue的子组件里面,中间嵌套了若干层,没办法移动到transform元素的外边。试了各种css方案解决不了。

相关代码

可至这里查看:http://jsfiddle.net/qc9ovsL0/3/
代码如下:

<!DOCTYPE html>
<HTML>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Welcome here!</title>
  </head>

  <body>

    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      div {
        box-sizing: border-box;
      }

      .root {
        height: calc(100% - 26px);
        width: 100%;
        overflow: auto;
        border: 5px dashed blue;
        transform: translateY(0px);
      }

      .back-bar {
        position: fixed;
        bottom: 0;
        height: 26px;
        left: 0;
        right: 0;
        background: #ddd;
        text-align: center;
      }

      #content {
        border: 5px dashed black;
        padding: 5px;
        text-align: center;
      }

      #bottom-bt {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 26px;
        background: #f5d;
        border: 1px solid #d3a;
      }

      .pop {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #edf;
      }

    </style>

    <div class="root">
      <div id="content">

        <button id="bottom-bt" onclick="togglePop()">
         Should fixed, but scroll
      </button>

        <div class="pop" onclick="togglePop()" style="display:none;">
          <br><br><br>Should pop over fixed, but scroll<br><br> Click to close
        </div>
        <h3>
        How can i fix the button and pop-over ?
        </h3>
        </h3>
        <div>Many levels...1
          <div>Many levels...2
            <div>Many levels...3
              <div>Many levels...4
                <div>Many levels...5
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                  <div>this is content</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button onclick="togglePop()" style="color:red">
       ======== Click to pop =========
      </button>
        <div>this is content</div>
      </div>
    </div>

    <div class="back-bar">
      &lt; &nbsp; &nbsp; &nbsp; &gt;
    </div>

    <script>
      function togglePop() {
        var el = document.querySelector('.pop');
        el.style.display = el.style.display == 'block' ? 'none' : 'block'
      }

    </script>
  </body>

</HTML>

你期待的结果是什么?实际看到的错误信息又是什么?

期待fixed的按钮和pop层不要随页面滚动

回复
阅读 7.4k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏