How to overlay div over another

Question

I am trying to do something like overlaying two divs over a main div, by using position absolute and top properties of CSS. But I don't know the correct way of doing this for responsive view.

Video SDK will inject the video stream in the main div. But that is having some kind of black background on it, which I want to remove. As I can't able to find any other way the last option I can think of is to manually hide the black portion at the top and bottom by using div and CSS.

Snapshot- here the entire view is a single div and I want to remove the black background at top and bottom of the video card

I want it to be like this -

I have put two divs one on top and another on the bottom and given them the background of gray! But I don't think it's the way to do it. How can I make it work so it won't break even after resizing the size of the browser!

Code -

<div id="root" style="position: relative; display: block; max-width: 100%; text-align: center; margin-top: 10%; height: 80vh; margin-right: auto; margin-left:auto">
                <!-- Video SDK will inject the video stream here -->
</div>
            <div id="hide_top" style="position: absolute;height: 12vh;width: 76vw;background: gray;top: 20%;"></div>
            <div id="hide_bottom" style="position:absolute;height: 15vh;width: 76vw;background: gray;top: 54%;"></div>

Usually div's should go inside the container, they may also need `width:100%` — Djave, Jan 12 '22 at 17:46

score 2 · Answer 1 · edited Jan 14 '22 at 18:29

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute, fixed, or relative).

Let's try out the following example to understand how it works:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS Overlaying One DIV over Another DIV</title>
        <style> 
            .container {
              width: 200px;
              height: 200px;
              position: relative;
              margin: 20px;
            }

            .box {
              width: 100%;
              height: 100%;            
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0.8;  /* for demo purpose  */
            }

            .stack-top {
              z-index: 9;
              margin: 20px; /* for demo purpose  */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box" style="background: red;"></div>
            <div class="box stack-top" style="background: blue;"></div>
        </div>
    </body>
</html>

How to overlay div over another

1 Answers1