將z-index應用於div溢出（滾動條）

我在整個頁面上都有一個水平滾動條和一個圖像（或其他div）的div（絕對位置）。這個問題是我想能夠滾動圖像旁邊的div。對於a鏈接，我將它們定位在相對位置並應用z-index。 如何才能將z-index僅應用於div的滾動條？所以，我希望div在圖像背後。將z-index應用於div溢出（滾動條）

Screenshoot例子：

視覺舉例：

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

謝謝！

來源

2016-07-29 MM PP

'Z-index'是不是你可以嘗試爲文本內容DIV這個代碼在這裏工作。無法隱藏位置爲'絕對'或'固定'的滾動條div。你必須做其他的解決方法，比如設置div的高度，或者計算滾動條高度並用JS減少它，... – eisbehr

你想通過div的圖像？或者我可以把圖像放在div下面 – 2016-07-29 06:06:26

@Yuva我說：「我如何才能將z-index應用於div的滾動條？」。所以，我希望div在圖像背後。 –

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

來源

2016-07-29 06:06:40 frnt

我希望這enter link description here有助於您

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

來源

2016-07-29 06:13:38

z-index: 100; 
position: relative;

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

來源

2016-07-29 06:21:48

我說：「我如何才能將z-index應用於div的滾動條？」。所以，我希望div在圖像背後。謝謝！ –

您可以將z-index設置爲負值，請參閱示例https://jsfiddle.net/m5p5ngep/3/ –

將z-index應用於div溢出（滾動條）

回答

相關問題