Question

我有一个简单的滑块，也有一个绝对定位的元素。一切都很好，直到焦点设置为可见包装之外的链接。在这种情况下，移动绝对元素以显示溢出隐藏链接。看起来浏览器正在移动包装器（和绝对元素）而不是内部div，以使链接成为焦点。这可以通过编程方式或使用Tab键进行。

我无法弄清楚如何将绝对元素保持在同一个地方。任何建议表示赞赏！

<style>
    .thing {
        display:inline-block;
        width: 100px;
        height: 50px;
        margin-right: 10px;
        background-color: #ccc;
    }
</style>

<div class="outer_wrapper" style="width: 300px; overflow: hidden; white-space: nowrap; background-color: #aaa; position: relative;">
    <div class="right" style="position: absolute; z-index: 1; right: 0; top: 0; background-color: #FF0000; height: 50px; width: 10px;">
    </div>

    <div id="strip" style="position: relative;">
        <div class="thing">
            <a href="#">something1</a>
        </div>
        <div class="thing">
            <a href="#">something2</a>
        </div>
        <div class="thing">
            <a href="#">something3</a>
        </div>
        <div class="thing">
            <a href="#" id="last">something4</a>
        </div>
    </div>
</div>

<div onclick="document.getElementById('last').focus();">click me</div>

您可以在此处查看问题：https://jsfiddle.net/s1ctnsut/

只需点击“点击我”文字，绝对定位的红色元素就会向左移动。我希望它保持固定在右边。

感谢。

Answer 1

由于您在容器上滚动其内容（包括绝对定位的内容也会相应地移动）

因此，#strip应为100％宽overflow:hidden。这样滚动就会发生在那里，红色条不会受到影响

添加

#strip{width:100%;overflow:hidden;}

将解决它（demo）

CSS：如何防止焦点在溢出中破坏绝对位置：隐藏包装

1 个答案: