具有隐藏溢出（带有scolling）的flex布局中的绝对定位按钮[重复]答案

【问题标题】：Absolute positioned button in a flex layout with hidden overflow (with scolling) [duplicate]具有隐藏溢出（带有scolling）的flex布局中的绝对定位按钮[重复]
【发布时间】：2019-01-03 08:27:36
【问题描述】：

我正在尝试实现带有隐藏滚动条的Flex-layout，我已经实现了。但现在我还需要一个绝对/固定按钮，但我无法让它工作。

没有隐藏的滚动条它可以工作：

但是当我隐藏滚动条时，按钮会粘在顶部，这是不可取的。

<style>
    .root {
        background-color: #fff;
        display: flex;
        height:100%;
    }

    .pane {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        overflow-x: hidden;
        overflow-y: visible;
        -ms-overflow-style: none;
        height: 100%;
        width: 400px;
    }

    .pane::-webkit-scrollbar {
        display: none
    }

    div.pos {
        position: absolute;
        right: 0px;
        width: 32px;
        height: 32px;
        background-color: #01689B;
        color: #fff;
    }
</style>
<div class="root">
    <div class="pane">
        <div class="pos">x</div>
        <div style="height: 2000px">
            Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> The button should stick to the right of the text and scroll width the text;
        </div>
    </div>
</div>

【问题讨论】：

您的示例代码没有显示，滚动条仍然可见。提供重现问题的minimal reproducible example。
@LGSon 它适用于 Chrome。将检查它在 IE 中失败的原因并编辑问题。不要使用“运行代码 sn-p”，尽管它仅在本地运行时有效。
我在这里使用 Chrome，带有 sn-p，......如果它在本地工作，它没有理由在 sn-p 中也不能重现。
为了争论，你愿意在本地试试吗？
啊，是的，我已经编辑了答案，添加了高度。

标签： html css flexbox scrollbar absolute

【解决方案1】：

问题很简单，绝对定位元素与滚动元素无关。

给它position: relative，它会的。

堆栈sn-p

<style>
        html, body {
            overflow: hidden;
            height: 100%;
        }
        .root {
            background-color: #fff;
            display: flex;
            height: 100%;
        }
    
        .pane {
            position: relative;           /*  added  */
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            overflow-x: hidden;
            overflow-y: visible;
            -ms-overflow-style: none;
            height: 100%;
        }
    
        .pane::-webkit-scrollbar {
            display: none
        }
    
        div.pos {
            position: absolute;
            right: 0px;
            width: 32px;
            height: 32px;
            background-color: #01689B;
            color: #fff;
        }
    </style>
    <div class="root">
        <div class="pane">
            <div class="pos">x</div>
            <div style="height: 2000px">
                Lorem ipsum dolor sit amet, etc etc
            </div>
        </div>
    </div>

【讨论】：

太棒了！谢谢@LGSon
@RalfdeKleine 太好了...我也关闭了这篇文章作为一个骗子，实际上是这样，希望你同意。它有利于即将推出的基于 Flexbox 的问题，这些问题可能相似，现在已链接。
如果是肯定没问题。