MM PP MM PP - 4 months ago 34
Javascript Question

Apply z-index to div overflow (scrollbar)

I have a div with horizontal scrollbar and an image (or other div) over entire page (with position absolute). The prolem is I want to be able to scroll the div which is beside the image. For

a
links I positioned them relative and applied z-index. How can I apply
z-index
only for div's scrollbar? So, I want the div to be behind the image.


Screenshoot Example:

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

Visual Example:



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





Thank you!

Answer

Add pointer-events:none to another div which consist of img tag.

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