Que son las hojas de estilo (CSS) CSS y HTML Definición de estilos a nivel página Propiedades relacionadas a fuentes. Agrupación de varios elementos HTML con una misma regla de estilo Definición de varias reglas para un mismo elemento HTML Propiedades relacionadas al texto (color, text-align, text-decoration) Más propiedades relacionadas al texto (letter-spacing, word-spacing, text-indent, text-transform) Herencia de propiedades de estilo. Definición de un estilo en función del contexto. Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. Definición de estilos por medio de id. Propiedades relacionadas al borde de un elemento HTML (border-width, border-style, border-color) Más propiedades relacionadas al borde de un elemento HTML Propiedades relacionadas al padding de un elemento HTML Propiedades relacionadas al margen de un elemento HTML Propiedades relacionadas a listas Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes Propiedades relacionadas al border Propiedades relacionadas al padding Propiedades relacionadas al margin Propiedades relacionadas al fondo (background) El selector universal * Pseudoclases Eliminacion subrayado de enlace Creación de un menú vertical Creación de un menú horizontal Propiedades relacionadas a la dimensión de un objeto en la página. Unidades de medida (px, rem, em, cm, mm etc.) Formas para indicar el color. Definir un cursor para un elemento HTML Aplicación de hojas de estilo a un formulario Definiendo reglas de estilo a una tabla. Posicionamiento relativo (position: relative) Posicionamiento absoluto (position: absolute) Posicionamiento absoluto y propiedad z-index Posicionamiento fijo (position: fixed) Disposición de 2 columnas (position: absolute) Propiedad float aplicada a una imagen Propiedades relacionadas a la dimensión de un objeto en la página Propiedad clear Disposición de 2 columnas (propiedad float) Disposición de 2 columnas, cabecera y pie Disposición de 3 columnas, cabecera y pie Diseño de ancho fijo Diseño de ancho líquido Selector de hijos Selector de hermano adyacente y hermano general Selector de atributo Pseudo-clases: first-child y last-child) Pseudo-clases: nth-child y nth-last-child Pseudo-clases: nth-of-type, nth-last-of-type, first-of-type y last-of-type Pseudo-clases: only-child y only-of-type Pseudo-clase: empty Pseudo-elementos: first-letter y first-line Pseudo-elementos: before y after CSS media queries Flexbox Flexbox - (flex-direction aplicada al contenedor) Flexbox - (justify-content aplicada al contenedor) Flexbox - (align-items aplicada al contenedor) Flexbox - (flex-wrap aplicada al contenedor) Flexbox - (align-content aplicada al contenedor) Flexbox - (flex-flow aplicada al contenedor) Flexbox - (flex-grow aplicada a los items) Flexbox - (flex-shrink aplicada a los items)o Flexbox - (flex-basis aplicada a los items) Flexbox - (flex aplicada a los items) Flexbox - (order aplicada a los items) Flexbox - (align-self aplicada a los items)

Posicionamiento fijo (position: fixed)

El fixedvalor es similar a, absoluteya que puede ayudarlo a colocar un elemento en cualquier lugar relativo al documento, sin embargo, este valor no se ve afectado por el desplazamiento

position: fixed

Un elemento con position: fixed; está posicionado en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la página. Las propiedades superior, derecha, inferior e izquierda se utilizan para colocar el elemento.

Un elemento fijo no deja un hueco en la página donde normalmente se habría ubicado.

La propiedad float posiciona una caja moviéndola todo lo posible a la izquierda o derecha de su posición original. Los tres valores de esta propiedad se interpretan de la siguiente manera:

  • left, la caja se desplaza todo lo posible a la izquierda de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su derecha (a menos que se indique lo contrario mediante la propiedad clear).
  • right, la caja se desplaza todo lo posible a la derecha de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su izquierda (a menos que se indique lo contrario mediante la propiedad clear).
  • none, la caja no se desplaza respecto de su posición original. Además de ser el valor por defecto de esta propiedad, el valor none se puede utilizar para eliminar el float aplicado a un elemento mediante otros selectores.

Observe el elemento fijo en la esquina inferior derecha de la página. Aquí está el CSS que se utiliza:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>Un elemento con position: fixed;  se coloca en relaci&oacuten con la ventana gr&aacutefica, lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la p&aacutegina:</p>


<div class="fixed">
Este  position: fixed;
</div>
</body>
</html>
z-index


Disponer dos div con posicionamiento fijo, uno en la parte superior y otro a la izquierda de la ventana.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="barrasuperior">
Div superior
Div superior
Div superior
</div>
<div id="barralateral">
Div lateral
Div lateral
Div lateral
</div>
<div id="contenido">
Aquí el contenido - Aquí el contenido -
Aquí el contenido - Aquí el contenido -
Aquí el contenido - Aquí el contenido -
Aquí el contenido - Aquí el contenido -
Aquí el contenido - Aquí el contenido -
</div>
</body>
</html>

La hoja de estilo a aplicar a esta página es:

* {
margin:0;
padding:0;
}

#barrasuperior{
position:fixed;
left:0px;
width:100%;
height:50px;
background-color:black;
color:white;
}

#barralateral{
position:fixed;
left:0px;
top:50px;
width:200px;
height:100%;
background-color:#eee;
}

#contenido{
padding-top:70px;
padding-left:220px;
}
position: fixed

Hemos definido tanto para la barrasuperior como para la barralateral el valor fixed para la propiedad position: position:fixed;

La barra superior comienza en la columna cero a nivel de píxeles y tiene un ancho de 100 por ciento (es decir ocupa siempre todo el ancho del navegador y una altura de 50px):

left:0px;
width:100%;
height:50px;

La barra lateral definimos los siguientes valores:

left:0px;
top:50px;
width:200px;
height:100%;

Hay que tener en cuenta que el elemento HTML con la propiedad fixed sale del flujo normal de los elementos de la página (igual como ocurre con el valor absolute), luego por eso definimos para el Div de contenido un padding para la parte superior e izquierdo donde se encuentran los div fixed:

padding-top:70px;
padding-left:220px;

position: sticky;

Un elemento con position: sticky;se posiciona según la posición de desplazamiento del usuario. Un elemento fijo alterna entre relativey fixed, según la posición de desplazamiento. Se posiciona en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica, luego se "pega" en su lugar (como posición: fija). Nota: Internet Explorer, Edge 15 y versiones anteriores no admiten el posicionamiento fijo. Safari requiere un prefijo -webkit- (vea el ejemplo a continuación). También debe especificar al menos uno de top, right, bottom o left para el posicionamiento pegajosa al trabajo.


<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Intente desplazarse (<b>scroll</b>) dentro de este marco para comprender como funciona el posicionamiento fijo.</p>
<div class="sticky">Yo estoy en sticky!</div>
<div style="padding-bottom:2000px">
  <p>En este ejemplo, el elemento sticky se pega en la parte superior de la p&aacutegina (top: 0), cuando llega a su posición de desplazamiento.</p>
<p>Alg&uacuten texto para permitir el desplazamiento .. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint eficiantur su anuncio. Eum no molestiae voluptatibus.</p>
<p>Alg&uacuten texto para permitir el desplazamiento .. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint eficiantur su anuncio. Eum no molestiae voluptatibus</p>
</div>
</body>
</html>
z-index