Estoy tratando de superponer una imagen en otra pero no funciona.
Mi código
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div>
<img src="https://place-hold.it/338x280" />
</div>
</div>
No estoy usando margin-top o margin-bottom porque estoy buscando en respuesta. definir el margen en algún momento rompe el diseño en una estructura diferente.
hay muchas maneras de hacer eso. una forma simple de usar su código de donación es eliminar el estilo flex del mobile y ponerlo en body .
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
una mejor manera es poner both pictures en un div y luego darles la same position en ese div .
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="container">
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
</div>
Si sabemos por qué quiere hacer esto, podría haber una mejor manera.
Coloque ambas imágenes dentro de un div con position: relative; . Agregue esta clase a la imagen que debería estar en la parte superior:
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div style="position: relative;">
<img src="https://place-hold.it/338x280" />
<img class="neer" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
</div>