[SOLUCIONADO] Dejar body fijo y mostrar una capa absoluta

[madman_18]

Hola a todos!

Os comento una idea que querría hacer:

Me gustaría para la web que estoy haciendo mostrar una capa "emergente" (vamos una capa absoluta que posicionaría encima de cualquier elemento) para mostrar el perfil del usuario.

Ahora bien....me gustaría hacer que el contenido que quedaría debajo de dicha capa no se desplazase...

Imaginad que la capa absoluta con el perfil mide 800px de alto (por poner un ejemplo) entonces me gustaría que se pudiera desplazar hacia abajo pero que el contenido que está por debajo de dicha capa no hiciese scroll (como si se pusiese un "fixed" digamos)

¿Hay posibilidad de hacerlo? Si alguno me pudiese orientar se lo agradezco.

[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;
}
 

[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 :)