0
279
ViewsCómo superponer div sobre otro
Estoy tratando de hacer algo como superponer dos divs sobre un div principal, usando la posición absolute y las propiedades top de CSS. Pero no sé la forma correcta de hacer esto para la vista receptiva.
Video SDK inyectará la transmisión de video en el div principal. Pero eso tiene algún tipo de fondo negro, que quiero eliminar. Como no puedo encontrar otra forma, la última opción que se me ocurre es ocultar manualmente la parte negra en la parte superior e inferior usando div y CSS.
Instantánea: aquí la vista completa es un solo div y quiero eliminar el fondo negro en la parte superior e inferior de la tarjeta de video 
Quiero que sea así -
¡He puesto dos divs uno en la parte superior y otro en la parte inferior y les he dado el fondo gris! Pero no creo que sea la manera de hacerlo. ¿Cómo puedo hacer que funcione para que no se rompa incluso después de cambiar el tamaño del navegador?
Código -
<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>1 answers
Answer question0
Puede usar la propiedad de posición de CSS en combinación con la propiedad z-index para superponer un div individual sobre otro elemento div. La propiedad z-index determina el orden de apilamiento de los elementos posicionados (es decir, elementos cuyo valor de posición es absoluto, fijo o relativo).
Probemos el siguiente ejemplo para entender cómo funciona:
<!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>