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叠加滚动问题

回答

相关问题