HTML CSS疊加滾動問題

我需要使用css疊加在視頻上繪製矩形，下面的代碼工作正常，但是當我向下滾動頁面時，矩形看起來並未向上移動，但視頻元素正在向上移動。HTML CSS疊加滾動問題

下面的代碼有什麼問題。

body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 150px;; 
 
    width: 300px; 
 
    position: fixed; 
 
    z-index: 0; 
 
    top: 0px; 
 
    left: 0px; 
 
     overflow: auto; 
 
    background:transparent; 
 
    border-radius: 2px; 
 
    border: 2px solid #FF0000; 
 

 
    transition: 0.0s; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
<h1> 
 
Title 
 
</h1> 
 
<video width=800 height=600 id=v controls loop> 
 
    <source src=video.webm type=video/webm> 
 
    <source src=video.ogg type=video/ogg> 
 
    <source src=http://www.w3schools.com/html/mov_bbb.mp4 type=video/mp4> 
 

 
</video> 
 
<div id="myNav" class="overlay"> </div> 
 

 

 
<h2> 
 
Some text 
 
</h2> 
 

 
</body> 
 
</html>

來源

2016-07-14 CodeDezk

我很抱歉，我無法理解你的問題正確的。你能不能更清楚些？謝謝 – Kan412

試試這個：

請更改position: fixed;到position: absolute;

body { 
    margin: 0; 
    font-family: 'Lato', sans-serif; 
} 

.overlay { 
    height: 150px;; 
    width: 300px; 
    position: absolute; 
    z-index: 0; 
    top: 0px; 
    left: 0px; 
     overflow: auto; 
    background:transparent; 
    border-radius: 2px; 
    border: 2px solid #FF0000; 

    transition: 0.0s; 
}

DEMO HERE

來源

2016-07-14 10:07:33

感謝您的回答，那麼有什麼方法可以覆蓋與視頻元素相關的矩形。目前頂部，左側是基於網頁。 – CodeDezk

這裏的解決方案..

請更改固定覆蓋的位置絕對

.video-wraper { position: relative; } .video-wraper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.4); }  <div class="video-wraper"> <video width=800 height=600 id=v controls loop> <source src=video.webm type=video/webm> <source src=video.ogg type=video/ogg> <source src=http://www.w3schools.com/html/mov_bbb.mp4 type=video/mp4> </video> </div>

來源

2016-07-14 10:10:04

添加一個包裝你<video>周圍，.overlay

<div class="wrapper"> 
<video width=800 height=600 id=v controls loop> 
     <source src=video.webm type=video/webm> 
     <source src=video.ogg type=video/ogg> 
     <source src=http://www.w3schools.com/html/mov_bbb.mp4 type=video/mp4> 
    </video> 
    <div id="myNav" class="overlay"> </div> 
</div> 



overlay { 
    height: 150px; 
    width: 300px; 
    margin-top: -75px; //center it 
    margin-left: -150px; //center it 
    position: absolute; //changed to absolute 
    z-index: 0; 
    top: 300px; 
    left: 400px; 
     overflow: auto; 
    background:transparent; 
    border-radius: 2px; 
    border: 2px solid #FF0000; 
    transition: 0.0s; 
} 
.wrapper{ 
    position: relative; 
}

看到演示 https://jsfiddle.net/pyo5pLfa/1/

來源

2016-07-14 10:14:34

HTML CSS疊加滾動問題

回答

相關問題