将z-index应用于div溢出(滚动条)

时间:2016-07-29 05:59:43

标签: javascript jquery html css

我在整个页面上有一个带水平滚动条和图像(或其他div)的div(位置绝对)。问题是我希望能够滚动图像旁边的div。对于a链接,我将它们定位为相对并应用z-index。 如何仅将z-index应用于div的滚动条?所以,我希望div在图像后面。

屏幕截图示例:

Black lines are an image with position absolute over the page.

视觉示例:

<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>

谢谢!

3 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分:1)

我希望enter link description here对您有所帮助

parse_url

答案 2 :(得分:1)

您可以尝试使用此代码进行文本内容div

 z-index: 100;
 position: relative;

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