将 z-index 应用于 div 溢出（滚动条）

Question

我有一个带有水平滚动条的 div 和整个页面上的图像（或其他 div）（绝对位置）。问题是我希望能够滚动图像旁边的 div。对于 a 链接，我将它们相对放置并应用了 z-index。 我怎样才能申请 z-index 仅用于 div 的滚动条？所以，我希望 div 位于图像后面。

截图示例：

视觉示例：

 <div style="overflow-x: scroll; overflow-y: hidden; width: 300px; height: 130px; white-space: nowrap;">
            s sd ds fsd fs df s fs fds fsd fsd fsd fds f sdf sd fs fsd f sdf sd f sdf sd f sdf ds fsdf sf ds f sdf dsf sdf s df sdf sdf ds fsd fsdf sd fds
            <br/>fsd fds f sd fsd fsd fds fs df sd f sd fds f sd f sdf sd f ds fsdf s df sd fs df sdfsd f
            <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd
            <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd
            <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd
</div>
<div style="position: absolute; top: 0px; left: 0px;">
            <img src="http://www.wabmo.com/Album/watermark/watermarks/Sample-trans.png" width="300"/>
</div>

谢谢！

原文由 MM PP 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 pointer-events:none 到另一个由 img 标签组成的 div。

 <div style="position: absolute; top: 0px; left: 0px;pointer-events:none;">
            <img src="http://www.wabmo.com/Album/watermark/watermarks/Sample-trans.png" width="300;"/>
</div>

原文由 frnt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我希望 这 对你有帮助

.sample
    {
      position: absolute; top: 0px; left: 0px;pointer-events:none;
    }

    <div style="overflow-x: scroll; overflow-y: hidden; width: 300px; height: 130px; white-space: nowrap; ">
                s sd ds fsd fs df s fs fds fsd fsd fsd fds f sdf sd fs fsd f sdf sd f sdf sd f sdf ds fsdf sf ds f sdf dsf sdf s df sdf sdf ds fsd fsdf sd fds
                <br/>fsd fds f sd fsd fsd fds fs df sd f sd fds f sd f sdf sd f ds fsdf s df sd fs df sdfsd f
                <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd
                <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd
                <br/>sdf ds f sdf sd f dsf sd fds f ds fs df sd fds f ds f sd fs df sd fsdfs df sdf sd fs df sd fsd
    </div>
    <div class='sample'>
                <img src="http://www.wabmo.com/Album/watermark/watermarks/Sample-trans.png" width="300"/>
    </div>

原文由 user6573425 发布，翻译遵循 CC BY-SA 4.0 许可协议