¿Cómo se puede crear una superposición en css?

Question

Me gustaría crear un div con un tamaño arbitrario, luego mostrar algo encima de ese div. ¿Cuál es la mejor manera de posicionar y dimensionar la superposición exactamente como la siguiente div en css?

Answer 1

Puede utilizar position:absolute para posicionar una capa interior de su div y luego se extienden en todas las direcciones, así:

CSS^{actualizan *}

.overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color:rgba(0, 0, 0, 0.85); 
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */ 
    z-index:9999; 
    color:white; 
} 

Sólo tiene que asegurarse que su div principal tiene la propiedad position:relative agregada y una z-index inferior.

---

Hice una demostración que debería funcionar en todos los navegadores, incluido IE7 +, para un comentarista a continuación.

Demo

quitado la propiedad opacity de la CSS y en su lugar utiliza un color RGBA para dar el fondo, y sólo el fondo, un nivel de opacidad. De esta forma, el contenido que porta la superposición no se verá afectado. Como IE no es compatible con rGBA, utilicé un hack IE para darle una imagen de fondo PNG codificada en base64 que llena el div de superposición, de esta manera podemos evadir el problema de opacidad de IEs donde también aplica la opacidad a los elementos hijos.

Answer 2

respuesta rápida sin ver ejemplos de su HTML y CSS actual es utilizar z-index

css:

#div1 { 
position: relative; 
z-index: 1; 
} 

#div2 { 
position: relative; 
z-index: 2; 
} 

Dónde div2 es la superposición

Answer 3

se recomienda usar los atributos de CSS hacer esto. Puede usar position: absolute para colocar un elemento encima de otro.

Por ejemplo:

<div id="container"> 
    <div id="on-top">Top!</div> 
    <div id="on-bottom">Bottom!</div> 
</div> 

y CSS

#container {position:relative;} 
#on-top {position:absolute; z-index:5;} 
#on-bottom {position:absolute; z-index:4;} 

Me gustaría echar un vistazo a este consejo: http://www.w3schools.com/cssref/pr_class_position.asp

Y finalmente aquí es un jsFiddle para mostrarle mi ejemplo

http://jsfiddle.net/Wgfw6/

Answer 4

http://jsfiddle.net/55LNG/1/

CSS:

#box{ 
    border:1px solid black; 
    position:relative; 
} 
#overlay{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    right:0px; 
    background-color:rgba(255,255,0,0.5); 
} 

Answer 5

llego tarde a la fiesta, pero si usted quiere hacer esto a un elemento arbitrario usando sólo CSS, sin jugar un poco con el posicionamiento, divs superposición etc. ., puede utilizar una caja de inserción sombra:

box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5); 

Esto funcionará en cualquier elemento menor que 4000 píxeles largo o ancho.

ejemplo: http://jsfiddle.net/jTwPc/

Answer 6

Si no le importa jugar con z-index, pero desea evitar añadir div extra por superposición, puede utilizar el método siguiente

/* make sure ::before is positioned relative to .foo */ 
.foo { position: relative; } 

/* overlay */ 
.foo::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 0; 
} 
/* make sure all elements inside .foo placed above overlay element */ 
.foo > * { z-index: 1; } 

Answer 7

Aquí es una superponer usando un pseudo-elemento (por ejemplo: no es necesario añadir más marcadores para hacerlo)

.box { 
 
    background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg); 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.box:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.4); 
 
}

<div class="box"></div>

Answer 8

Estaba jugando con un problema similar en el codepen, esto es lo que hice para crear una superposición usando un simple markup css. Creé un elemento div con la clase .box aplicada. Dentro de este div creé dos divs, uno con la clase .inner aplicada y el otro con la clase .notext aplicada a él. Ambas clases dentro de .box div están inicialmente configuradas para mostrar: ninguna, pero cuando .box está sobrevolada, estas se hacen visibles.

.box{ 
 
    height:450px; 
 
    width:450px; 
 
    border:1px solid black; 
 
    margin-top:50px; 
 
    display:inline-block; 
 
    margin-left:50px; 
 
    transition: width 2s, height 2s; 
 
    position:relative; 
 
    text-align: center; 
 
    background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG'); 
 
    background-size:cover; 
 
    background-position:center; 
 
    
 
} 
 
.box:hover{ 
 
    width:490px; 
 
    height:490px; 
 
} 
 
.inner{ 
 
    border:1px solid red; 
 
    position:relative; 
 
    width:100%; 
 
    height:100%; 
 
    top:0px; 
 
    left:0px; 
 
    display:none; 
 
    color:white; 
 
    font-size:xx-large; 
 
    z-index:10; 
 
} 
 
.box:hover > .inner{ 
 
    display:inline-block; 
 
} 
 
.notext{ 
 
    height:30px; 
 
    width:30px; 
 
    border:1px solid blue; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
} 
 
.box:hover > .notext{ 
 
    background-color:black; 
 
    opacity:0.5; 
 
    display:inline-block; 
 
}

<div class="box"> 
 
    <div class="inner"> 
 
    <p>Panda!</p> 
 
    </div> 
 
    <div class="notext"></div> 
 
</div>

Espero que esto ayude! :) Cualquier sugerencia es bienvenida.