CodeDezk CodeDezk - 4 months ago 26
HTML Question

HTML CSS overlay scroll issue

I need to draw rectangle over video using css overlay, and below code working fine, but when I scroll the page down the rectangle not seems to be moving up but the video element is going up.

What wrong with below code.

<!DOCTYPE html>
<html>

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



</script>
</head>

<style>

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

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

Answer

try this one:

Please change position: fixed; to 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