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

Question

我有一个带有水平滚动条的 div，以及一个覆盖整个页面的图像（或其他 div）（使用绝对位置）。问题是我想要能够滚动旁边的 div。对于 a 链接，我将它们相对定位并应用了 z-index。如何仅为 div 的滚动条应用 z-index？因此，我希望该 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

---

“z-index”在这里不起作用。使用“absolute”或“fixed”定位方式无法隐藏滚动条。您需要做其他解决方案，例如设置内部div的高度或使用JS计算滚动条高度并减少它... - eisbehr

你想把图片放在div上面吗？还是我可以把图片放在div下面？ - user6573425

@Yuva 我说：“我怎样才能只为 div 的滚动条应用 z-index？”。所以，我希望 div 在图像后面。 - MM PP

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

Answer 2

我希望this对你有所帮助

.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

Answer 3

您可以尝试使用以下代码来创建文本内容的 div：

 z-index: 100;
 position: relative;

演示链接 https://jsfiddle.net/m5p5ngep/2/

- Santosh Khalse

---

我说：“如何仅为div的滚动条应用z-index？”。所以，我希望div在图像后面。谢谢！ - MM PP

你可以将z-index设置为负值，参考示例 https://jsfiddle.net/m5p5ngep/3/ - Santosh Khalse

当你尝试使用滚动条时会出现一些有趣的事情。:-P 滚动条不起作用。 - Robin Davies