Dejar body fijo y mostrar una capa absoluta

[madman_18]

Iniciado por alvaaz

Si podrías realizarlo. Tendrías que nombrar a la caja emergente con una position absolute y el contenedor tendría que ser relative.

Esto hace que el elemento con position: absolute inicie en la esquina superior izquierda de su elemento padre (el elemento que tenga la posición relative), ahora con los parametros, top, bottom, left y right, puedes darle alguna ubicación a la ventana emergente sin que tu elemento padre se mueva.

En el caso de que no haya ningún elemento con position: relative, tomará la esquina superior izquierda de la caja body.

Código HTML:

<section class="contenedor">
<article class="emergente">
<p>Hola soy una ventana</p>
</article>
</section>
 

Código CSS:

.contenedor{
width: 900px;
height: 200px;  
background: red;
position: relative; 
padding: 0;
margin: 0;
}
 
p{
padding: 0;
margin: 0;
background: green;
}
 
.emergente{
width: 450px;
height: 150px; 
background: yellow;
position: absolute; 
top: 20px;
left: 20px;
padding: 0;
margin: 0;
}
 

Gracias por contestar! La verdad que he probado lo que me dices, no es realmente lo que me gustaría lograr pero creo que por ahora me sirve :)