Skip to main content
Añadido ejemplo para la propiedad position: sticky
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

En este ejemplo podéis hacer scroll hacia arriba y hacia abajo para ver que el div menu se queda fijo cuando alcanza top: 0.

#marca{
  height: 50px;
  width: 100%;
  background-color: green;
  text-align: center;
}

#marca img{
  height: 100%;
}

#menu{
   position: sticky;
   top: 0; 
   height: 100px;
   width: 100%;
   background-color: red;
}

#contenido{
   height: 1200px;
   width: 100%;
   background-color: yellow;
}
<div id="marca">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png">
</div>

<div id="menu"></div>
<div id="contenido">CONTENIDO</div>

En este ejemplo podéis hacer scroll hacia arriba y hacia abajo para ver que el div menu se queda fijo cuando alcanza top: 0.

#marca{
  height: 50px;
  width: 100%;
  background-color: green;
  text-align: center;
}

#marca img{
  height: 100%;
}

#menu{
   position: sticky;
   top: 0; 
   height: 100px;
   width: 100%;
   background-color: red;
}

#contenido{
   height: 1200px;
   width: 100%;
   background-color: yellow;
}
<div id="marca">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png">
</div>

<div id="menu"></div>
<div id="contenido">CONTENIDO</div>

Recompensa finalizada con 100 de reputación otorgada por ComunidadBot
se añadieron 3126 caracteres en el cuerpo
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64
#centrado{
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>
#centrado{
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>
#centrado{
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>
se añadieron 3126 caracteres en el cuerpo
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

BONUS: Ejemplos típicos.

Estos son algunos ejemplos típicos sobre posicionamiento (centrado).

1.- Centrar div horizontalmente en la página (con position: relative)

#centrado{
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

2.- Centrar div horizontalmente en la página (con position: absolute)

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

3.- Centrar div horizontalmente en la página (con position: static, valor por defecto)

#centrado{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

4.- Centrar div horizontalmente dentro de otro div

#contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="contenedor">
    <div id="centrado"></div>
</div>

5.- Centrar div horizontalmente y verticalmente en la página

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

6.- Centrar div verticalmente y horizontalmente dentro de otro div

#contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="contenedor">
   <div id="centrado"></div>
</div>

BONUS: Ejemplos típicos.

Estos son algunos ejemplos típicos sobre posicionamiento (centrado).

1.- Centrar div horizontalmente en la página (con position: relative)

#centrado{
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

2.- Centrar div horizontalmente en la página (con position: absolute)

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

3.- Centrar div horizontalmente en la página (con position: static, valor por defecto)

#centrado{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

4.- Centrar div horizontalmente dentro de otro div

#contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="contenedor">
    <div id="centrado"></div>
</div>

5.- Centrar div horizontalmente y verticalmente en la página

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

6.- Centrar div verticalmente y horizontalmente dentro de otro div

#contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="contenedor">
   <div id="centrado"></div>
</div>

Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64
Loading