父div的滾動條覆蓋子div

我有一個div容器與position: fixed和裏面我有position: fixed

只有在Chrome瀏覽器中彈出DIV，容器div的滾動條重疊我彈出股利。（見附圖）

請幫我擺脫彈出div的滾動條。

編輯： 添加代碼來說明問題：

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

來源

2017-05-25 ScrapCode

請分享您的代碼... –

如果我們可以看到您的HTML標記和您的CSS以及任何相關的JavaScript，將會非常有用。否則，我們不能做任何事情，只能猜測，這對你沒有用處。（請參閱隨機猜測答案...） –

@MarkSchultheiss添加了代碼段，記住問題只在Chrome上。 – ScrapCode

的#content股利外貼上您的popup標記。檢查下面的代碼片段：

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px; 
 
    z-index:99; 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
</div>

來源

2017-05-25 11:53:59 Bhuwan

它不起作用！ – ScrapCode

你有沒有試過@ @商業自殺使用'！重要'提到。否則在codepen或jsfiddle中分享您的代碼 – Bhuwan

添加代碼段，僅在鉻上觀察到問題 – ScrapCode

如果只在重疊的問題，您可以通過z-index: 999修復它。給這個CSS屬性您的彈出這樣的：

.popup { 
    z-index: 999; // or more 
}

來源

2017-05-25 11:54:43

它不起作用！ – ScrapCode

您是否嘗試添加'！important'？像這樣：'z-index：999！important;'。它解決了問題嗎？ –

它也沒有幫助。 – ScrapCode

這同overflow-y:scroll;和#content的位置，以及它們如何協同工作要做。只需刪除#content上的postion:fixed;即可。它從它的容器中獲得它的位置，然後應該解決問題。

次要但彈出的left: 200px;缺少分號 - 可能不會在這裏播放，但收緊它。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin:0; 
 
} 
 
#content { 
 
    /* position: fixed;*/ 
 
    top: 5px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5px; 
 
    width:300px; 
 
    overflow-y: scroll; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
} 
 
#messages .message { 
 
    height: 79px; 
 
    background: #999; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.popup { 
 
    position: fixed; 
 
    width:250px; 
 
    height:200px; 
 
    background-color:red; 
 
    top: 50px; 
 
    left: 200px; 
 
} 
 
.popup .videoTag { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    
 
    <div id="content"> 
 
     <div id="messages"> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
      <div class="popup"> 
 
      <video class="videoTag" controls> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
      </div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      <div class="message">example</div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

來源

2017-05-25 16:16:16

添加側欄上的'position：fixed'是爲了避免頁面右側滾動時滾動。因此我擔心我無法從中刪除固定位置。 – ScrapCode

它是如何在其他瀏覽器上工作的，它甚至可以在Chrome中使用，當我們沒有'video'標籤時。 – ScrapCode

不知道，我沒有寫這個瀏覽器。我只是看到這可以修復它。 –

好吧，如果你很酷的jQuery你可以做這樣的事情。

HTML

<div id="container"> 

<div id="content"> 
    <div id="messages"> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 1 </div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 2 </div> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 3</div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 4</div> 
     <div class="message" data-url="https://www.w3schools.com/html/mov_bbb.mp4">example 5</div> 
     <div class="message" data-url="http://techslides.com/demos/sample-videos/small.mp4">example 6</div> 

    </div> 

</div> 

<div class="popup"> 
    <video class="videoTag" controls> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
    </video> 
</div>

CSS

html, body { 
    height: 100%; 
} 
body { 
    margin:0; 
} 
#content { 
    position: fixed; 
    top: 5px; 
    left: 0; 
    right: 0; 
    bottom: 5px; 
    width:300px; 
    overflow-y: scroll; 
} 
#messages { 
    overflow: auto; 
} 
#messages .message { 
    height: 79px; 
    background: #999; 
    border-bottom: 1px solid #000; 
} 
.popup { 
    position: fixed; 
    width:250px; 
    height:200px; 
    background-color:red; 
    top: 50px; 
    left: 200px; 
    z-index:99; 
} 
.popup .videoTag { 
    width: 100%; 
    height: 100%; 
}

jQuery的

$(function(){ 
    $(".message").on("click",function(e){ 
    e.preventDefault(); 
    var url = $(this).data("url"); 
    $("video source").attr("src",url); 
    $("video")[0].load(); 
    }) 
})

的jsfiddle（在Chrome工作太;））

https://jsfiddle.net/7bkxez1f/

來源

2017-05-25 19:20:40 Warface

父div的滾動條覆蓋子div

回答

相關問題