CODEWITHSUNDEEP
htmlcss
CodeDezk
CodeDezk

Reputation: 1260

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. 

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>

Upvotes: 2

Views: 149

Answers (3)

Matej Žvan
Matej Žvan

Reputation: 766

add a wrapper around you <video> and .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;
}

see demo https://jsfiddle.net/pyo5pLfa/1/

Upvotes: 3

Srikanth Reddy
Srikanth Reddy

Reputation: 345

Here the solution..

Please change position of overlay fixed to absolute

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



<!---- wrap video into video wraper div -->
<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>

Upvotes: 3

Ivin Raj
Ivin Raj

Reputation: 3429

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

Upvotes: 3

Related Questions