Javascript 滚动条呈现在绝对位置元素上方，用于水平滚动元素下方的容器_Javascript_Html_Css_Reactjs_Z Index

Javascript 滚动条呈现在绝对位置元素上方，用于水平滚动元素下方的容器

javascript html css reactjs

Javascript 滚动条呈现在绝对位置元素上方，用于水平滚动元素下方的容器,javascript,html,css,reactjs,z-index,Javascript,Html,Css,Reactjs,Z Index,我正在开发一个React应用程序，它在同一页面上包含一个水平滚动视图和一个弹出窗口。在Chrome中进行测试时，我注意到一个bug，水平滚动视图的滚动条显示在我放置的popover的顶部，尽管popover具有绝对位置。我已经把问题缩小到一个简化的例子。以下是Chrome上的问题截图：我尝试了以下方法：将容器设置为具有相对位置，并调整容器和Popor的z索引调整容器上的溢出属性下面是一个我放在一起的简化HTML示例，演示了这个问题身体{ 溢出：隐藏；位置：相对位置； } .

我正在开发一个React应用程序，它在同一页面上包含一个水平滚动视图和一个弹出窗口。在Chrome中进行测试时，我注意到一个bug，水平滚动视图的滚动条显示在我放置的popover的顶部，尽管popover具有绝对位置。我已经把问题缩小到一个简化的例子。以下是Chrome上的问题截图：

我尝试了以下方法：

将容器设置为具有相对位置，并调整容器和Popor的z索引
调整容器上的
```
溢出
```
属性

下面是一个我放在一起的简化HTML示例，演示了这个问题


身体{
溢出：隐藏；
位置：相对位置；
}
.集装箱{
宽度：1000px；
高度：50px；
溢出：滚动；
空白：nowrap；
}
波弗先生{
宽度：200px；
高度：200px；
排名：0；
左：100px；
背景色：青色；
位置：绝对位置；
}
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。
你好

不确定这是否适用于更大的应用程序，但我相信将popover位置设置为相对位置，并移动HTML使popover呈现在容器下方应该可以做到这一点。我在Mac上的Chrome中使用了这个，效果很好

<html>
    <head>
        <style type="text/css">
            body {
                overflow: hidden;
                position: relative;
            }

            .container {
                width: 1000px;
                height: 50px;
                overflow: scroll;
                white-space: nowrap;
            }

            .popover {
                width: 200px;
                height: 200px;
                top: 0;
                left: 100px;
                background-color: teal;
                position: relative;
            }
        </style>
    </head>
<body>
    <div class="popover">
        Hi!
    </div>
        <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
</body>
</html>


身体{
溢出：隐藏；
位置：相对位置；
}
.集装箱{
宽度：1000px；
高度：50px；
溢出：滚动；
空白：nowrap；
}
波弗先生{
宽度：200px；
高度：200px；
排名：0；
左：100px；
背景色：青色；
位置：相对位置；
}
你好
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。

我无法在macOS Firefox上重现该漏洞，但可以在macOS Chrome和Safari上重现它。这似乎是一个webkit/blink渲染问题。您可以使用的一个技巧是强制GPU在元素上合成：这可以通过使用

transform:translate3d（0,0,0）简单地完成。请参见下面的概念验证示例：

正文{
溢出：隐藏；
位置：相对位置；
}
.集装箱{
背景：黄色；
宽度：1000px；
高度：50px；
溢出：滚动；
空白：nowrap；
}
波弗先生{
宽度：200px；
高度：200px；
排名：0；
左：100px；
背景色：青色；
位置：绝对位置；
变换：translate3d（0,0,0）；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。
你好
谢谢你的回答！但是，将“popover位置”更改为“相对”意味着它不再在水平容器的顶部进行渲染。从我将其放入JSFIDLE时可以看出，这使得POPOR在页面上的显示时间比水平容器早。这样做的目的是，弹出框应该呈现在水平容器的顶部，容器中的滚动条不应该出现在其上方。嗯，您还调整了HTML，以便弹出框位于容器之前？当我做出这两个调整时，它对我很有效。谢谢！这解决了问题。我注意到transform:translate3d（0,0,0）
也解决了这个问题。@Elethier很高兴听到它起作用了！我将更新我的答案以使用translateZ 0:）