Question

我正在一个项目上，在巫婆上，某些元素在动力学上定位为负的绝对值。滚动具有正绝对定位元素的父元素没有问题，但是我找不到滚动并使负绝对定位元素可见的解决方案。有什么办法吗？

这是我写的PEN，目的是说明我的意思。

<div class="relative-positioned">
    <div class="negative-absolute-positioned">negative absolute positioned</div>
    <div class="positive-absolute-positioned">positive absolute positioned</div>
</div>

.negative-absolute-positioned {
    position: absolute;
    top: 10px;
    left: -30px;
    background-color: darkslateblue;
    color: white;
    padding: 5px 10px;
}
.positive-absolute-positioned {
    position: absolute;
    top: 10px;
    left: 1000px;
    background-color: darkslateblue;
    color: white;
    padding: 5px 10px;
}
.relative-positioned {
    position: relative;
    width: 500px;
    height: 200px;
    overflow: scroll;
}

Answer 1

它与负的绝对值无关，它与溢出和direction属性有关，因为它与文本和滚动容器上的溢出有关。在从右到左的书写模式中，使用负值将内容移出容器的左侧实际上会出现可滚动的溢出。

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

如果您希望看到它的实际效果，请在您的Codepen中添加...

body { direction: rtl }

突然，您的负左值将可以滚动到滚动容器的内联端。

https://www.w3.org/TR/css-overflow-3/#scrolling-direction

由于Web兼容性的限制（由作者利用遗留的bug来秘密地隐藏视觉阅读器中的内容，而不是搜索引擎和/或语音输出），UA必须在开始时剪切滚动容器的可滚动溢出区域。框的内联开始侧（从而表现为在该侧上没有可滚动的溢出）。

视口使用主要写入模式进行这些计算。

所以这是很长的路要走，没有混合书写方式就无法完成您希望的事情。

如何使负值绝对定位元素滚动？

1 个答案: