html - CSS:如何防止焦点破坏溢出中的绝对位置:隐藏包装

Question

我有一个简单的 slider ，它也有一个绝对定位的元素。一切都很好，直到焦点设置到可见包装器之外的链接。在这种情况下，绝对元素被移动以显示溢出隐藏链接。看起来浏览器正在移动包装器(和绝对元素)而不是内部 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 )