0voto

Posicionamiento absoluto para remover elementos del orden de despliegue estándar con CSS

Deseo mostrar un area de notificaciones en la parte superior de la página, sin que altere la posición del resto de los elementos.

<html>
    <head></head>
    <body>
        <h1>Título</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
    </body>
</html>

¿Es posible hacerlo con CSS?

2 Respuestas

1voto

mario_vial Puntos1740

Puedes darle un alto fijo y un alto mínimo y máximo idénticos, esto es;

<div id="header">
  <div id="notificaciones">
    <span>3 nuevas</span>
  </div>
</div>

.notificaciones {
  height: 100px;
  max-height: 100px;
  min-height: 100px;
}

Así el espacio está igual, con o sin notificaciones

0voto

Peter Puntos150480

Otra opción es agregar el mensaje con posionamiento absolute

<body>
    <div id='notificaciones' style='position:absolute;width:50%;'></div>

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta