Is there any way to solve the fixed failure caused by position:fixed+transform? - Codes Helper

problem description

is there any way to solve the fixed failure caused by position:fixed + transform?

the environmental background of the problems and what methods you have tried

Open http://jsfiddle.net/qc9ovsL0/3/ during browsing to view the problem. The element located by the
fixed, because there are several layers nested in the middle of the subcomponents of the vue, there is no way to move to the outside of the transform element. Tried a variety of css solutions can not be solved.

related codes

you can check it here: http://jsfiddle.net/qc9ovsL0/3/
code is as follows:

<!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: -sharpddd;
        text-align: center;
      }

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

      -sharpbottom-bt {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 26px;
        background: -sharpf5d;
        border: 1px solid -sharpd3a;
      }

      .pop {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: -sharpedf;
      }

    </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">
      <    >
    </div>

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

    </script>
  </body>

</HTML>

what result do you expect? What is the error message actually seen?

expect fixed buttons and pop layers not to scroll with the page