Clase 12 - Position y Display

#css #position #display

Position

• La propiedad position en CSS la utilizamos para controlar la posición de un elemento en la página
• Existen 5 valores posibles para esta propiedad:
  • Static
  • Relative
  • Absolute
  • Fixed
  • Sticky

Static

• Es el valor predeterminado.
• Siguen el flujo normal del documento y no se ven afectados por las propiedades top, bottom, left y right

.coral {
  background-color: coral;
}

.lightseagreen {
  background-color: lightseagreen;
  position: static;
}

.lightblue {
  background-color: lightblue;
}

.lightgreen {
  background-color: lightgreen;
}

Relative

• También sigue el flujo normal del documento,
• Pueden ser desplazados de su posición original utilizando las propiedades top, bottom, left y right

.coral {
  background-color: coral;
}

.lightseagreen {
  background-color: lightseagreen;
  position: relative;
  top: 50%;
}

.lightblue {
  background-color: lightblue;
}

.lightgreen {
  background-color: lightgreen;
}

Absolute

• No siguen el flujo normal del documento y se pueden superponer.
• Se posicionan en relación con su elemento padre más cercano que tenga un position distinto de static

.coral {
  background-color: coral;
}

.lightseagreen {
  background-color: lightseagreen;
  position: absolute;
  top: 50px;
  left: 50px;
}

.lightblue {
  background-color: lightblue;
}

.lightgreen {
  background-color: lightgreen;
}

Fixed

• Se posicionan en relación con la ventana del navegador.
• Se eliminan del flujo normal del documento y mantienen su posición aunque la página se desplace

.coral {
  background-color: coral;
}

.lightseagreen {
  background-color: lightseagreen;
  position: fixed;
  bottom: 50px;
  right: 1500px;
}

.lightblue {
  background-color: lightblue;
}

.lightgreen {
  background-color: lightgreen;
}

Sticky

• Tiene un comportamiento relative hasta que alcanza un cierto punto de desplazamiento (scroll)
• A partir de ese momento se comporta como fixed.
• Es necesario especificar la posición donde el elemento debe pegarse utilizando alguna de las propiedades top, bottom, left o right

.coral {
  background-color: coral;
}

.lightseagreen {
  background-color: lightseagreen;
  position: sticky;
  top: 50px;
}

.lightblue {
  background-color: lightblue;
}

.lightgreen {
  background-color: lightgreen;
}

Display

• La propiedad display en CSS controla cómo se muestra un elemento en una página web.
• Existen varios valores y cada uno posee su propia funcionalidad:
  • block
  • inline
  • inline-block
  • none
  • flex
  • grid

Block

• El elemento se muestra como un bloque y ocupa todo el ancho disponible de su contenedor.
• Su altura podemos definirla o se ajustará automáticamente al contenido.

.color-box {
  padding: .5em;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #666;
  box-sizing: border-box;

  height: 200px;
  display: block
}

Inline

• El elemento se muestra como una línea dentro del flujo de elementos.
• No ocupan todo el ancho disponible y su altura se adapta automáticamente al contenido.

.color-box {
  padding: .5em;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #666;
  box-sizing: border-box;

  height: 10000px;
  width: 10000px;
  display: inline;
}

Inline-block

• Combina las características de block e inline.
• Se muestran como elementos en línea y solo ocupan el espacio necesario, pero permite establecer un alto y ancho.

.color-box {
  padding: .5em;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #666;
  box-sizing: border-box;

  height: 200px;
  width: 450px;
  display: inline-block;
}

Flex

• El elemento se mostrará como un contenedor flexible.
• Esto nos permite una fácil manipulación del diseño y posicionamiento de sus hijos

.container {
  background-color: #181818;
  display: flex;
  flex-direction: row;
}

.color-box {
  width: 450px;
  height: 200px;
  display: block;
}

.container {
  background-color: #181818;
  display: flex;
  flex-direction: column;
}

.color-box {
  width: 450px;
  height: 200px;
  display: block;
}

Grid

• El contenedor se mostrará como una cuadrícula, permitiendo así un control preciso del diseño y posicionamiento de los hijos.
• Los elementos se dividen en filas y columnas.

.grid-container {
  background-color: #181818;

  display: grid;

  /* Define tres columnas de igual ancho */
  grid-template-columns: 1fr 1fr 1fr;

  /* Define cuatro filas de igual ancho */
  grid-template-rows: 1fr 1fr 1fr 1fr;

  /* Define espacio entre las celdas */
  gap: 10px;
}