Ways to superimpose one div on top of another

Question

Ways to superimpose one div on top of another

I'm experimenting with overlaying two divs on top of a main div using CSS properties like position absolute and top. However, I'm uncertain about the correct approach to make this responsive.

The Video SDK will insert the video stream into the main div, but it seems to have a black background that I'd like to eliminate. If I can't find another solution, my last resort is to manually hide the black sections at the top and bottom using additional divs and CSS.

Here's an example - the current view is contained in a single div, but I want to get rid of the black background at the top and bottom of the video card https://i.sstatic.net/LL0Al.jpg

My desired outcome looks like this -

https://i.sstatic.net/yn0si.jpg

I've added two divs, one at the top and one at the bottom, with a gray background. But I suspect this isn't the best way to achieve my goal. How can I ensure it stays intact even when resizing the browser window?

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">
                <!-- The 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>

javascript css bootstrap-4

Answer 1

Answer №1

To create an overlay effect with CSS, you can utilize the position property along with the z-index property to stack one div on top of another. The z-index property controls the vertical stacking order of positioned elements like those with absolute, fixed, or relative positioning.

Let's explore a practical example to illustrate this concept:

<!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 demonstration purposes */
            }

            .stack-top {
              z-index: 9;
              margin: 20px; /* for demonstration purposes */
            }
        </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>

Answer 2

To create an overlay effect with CSS, you can utilize the position property along with the z-index property to stack one div on top of another. The z-index property controls the vertical stacking order of positioned elements like those with absolute, fixed, or relative positioning.

Let's explore a practical example to illustrate this concept:

<!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 demonstration purposes */
            }

            .stack-top {
              z-index: 9;
              margin: 20px; /* for demonstration purposes */
            }
        </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>

Ways to superimpose one div on top of another

Answer №1

Similar questions

What could be causing the error I'm encountering while attempting to utilize Array.includes as the function for Array.filter in my JavaScript code?

The input '{ data: InvitedUser[]; "": any; }' does not match the expected type 'Element'

What could be the reason for the sudden failure of my jQuery + AJAX functionality?

Vue JS: Breathing Life into Your Elements

Unlock the Potential of Bootstrap5 Carousel: Mastering Icon Movement

When it comes to utilizing jQuery for the mobile view, how many jQuery libraries are recommended for optimal performance?

Dynamically loading JSON content in an Angular application based on the user's selected item

issue encountered during resource provider setup

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

Showing PHP array in the JavaScript console

Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

What are the reasons behind loading failures and the subsequent failure to resolve promises?

Issue with bootstrap tooltip visibility within a specific div container

- The click function is failing to work after an ajax call [Potential event delegation problem]

Tips for updating values in an Angular model and pushing it to an array with the specified index

Transferring a Query between Domains with the Help of JavaScript

Display the Currently Searched Value with Select2

Ways to delete specific data and insert a new row into a Jquery data table without disrupting the remaining rows

Refining Flask-Generated Table Content with jQuery Filters

Ways to identify the active anchor within an li element