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

发布于 2022-09-11 16:30:28 字数 4916 浏览 12 评论 0

问题描述

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>