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

Question

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:

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 1

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>

Answer 2

I hope this helpful for you

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

Answer 3

You can try this code for text content div

 z-index: 100;
 position: relative;

Demo link https://jsfiddle.net/m5p5ngep/2/