Propiedades de posición de las hojas de estilo en cascada (css)
Los atributos de posicionamiento de CSS se utilizan principalmente para capas de estilo utilizando la etiqueta, aunque también se puede utilizar para el estilo de la posición de una imagen, contenedor o elemento en bloque dentro del navegador. Para las capas, tanto los contenidos, así como el recipiente pueden ser de estilo con los atributos en esta categoría.
Video: Curso de HTML y CSS #47 - Background: background-position
posición: Determina cómo un elemento de estilo debe ser colocado en una ventana del navegador. Especificar si la posición es absoluto, fijo, relativo, o estático.
#footer {position: relativa-}Al configurar la posición, utilice uno de los siguientes valores de estilo:
absoluto: Establece la posición del elemento absolutamente basado en los valores numéricos introducidos para la colocación del elemento con respecto al borde superior izquierdo de la ventana del navegador, o al elemento padre más cercano posición absoluta o relativamente.
fijo: Establece la posición del elemento absolutamente basado en los valores numéricos introducidos para la colocación del elemento con respecto al borde superior izquierdo de la ventana del navegador.
relativo: Establece la posición del elemento por los valores numéricos introducidos para la colocación del objeto en relación con la posición del elemento de estilo en el flujo de texto del archivo.
estático: Establece el elemento en una ubicación exacta dentro del flujo de texto.
anchura: Utilice este atributo para establecer el ancho de un elemento, tal como una capa u otro recipiente, mediante el uso de px, pt, en, cm, mm, ordenador personal, em, ex, %, o auto.
Video: Curso de HTML y CSS #25 - Posicionamiento: Relative
# Layer1 {width: 760px;}altura: Utilice este atributo para establecer la altura de un elemento, tal como una capa, mediante el uso de px, pt, en, cm, mm, ordenador personal, em, ex, %, o auto.
# Layer1 {height: 100px;}visibilidad: Este atributo determina el valor de visibilidad inicial de un elemento, que puede ser ajustado a oculto, heredar, o visible, cuando la página se abre por primera vez en una ventana del navegador.
# Layer1 {visibilidad: oculta-}La visibilidad no debe confundirse con la monitor atributo, que determina si un elemento debe ser tratado como un bloque o un elemento en línea o ser completamente ignorado por el navegador con la display: none; atributo. Con la visibilidad, que está tratando con el estado de visibilidad inicial de un elemento, tal como una capa, cuando la página se carga por primera en el navegador.
Este atributo también se puede activar y desactivar mediante el uso de javascript para ocultar y mostrar los elementos en la página, dando con ello un poco de interactividad a la página para el visitante.
Para modificar la visibilidad de su elemento, añadir la propiedad visibilidad a este selector CSS con uno de los siguientes valores:
oculto: Esta opción oculta una capa de mostrar cuando una página se abre inicialmente en un navegador.
heredar: Esta opción hace que cualquier capa de heredar la visibilidad de una capa-matriz si un padre no existe, la capa será visible. Cuando la visibilidad no está especificado, heredar es el atributo predeterminado.
visible: Elija esta opción para forzar la capa sea visible, independientemente de la configuración de visibilidad de cualquier capa de matriz, cuando la página se abre por primera vez en una ventana del navegador.
z-index: Este atributo especifica orden de apilamiento de una capa con respecto a cualquier otra capa de la página, ya que son vistos en un navegador.
Establecer el índice z de auto cuando el número no es crítica, configurarlo para heredar para hacer la capa heredan valor de índice z de una capa de matriz, o introduzca un número positivo o negativo específico, tal como 1, 15, o 100, cuando el número es importante con relación a las otras capas en la página.
Cuanto más alto sea el número, más cerca de la capa aparece en la parte delantera o la parte superior de la página más cercana al visitante- menor es el número, más cerca de la capa aparece a fondo del navegador.
#lastchance {z-index: 4-}La ilustración muestra un ejemplo de varias capas en una página con diferente z-index valores.
rebosar: El ajuste de desbordamiento puede ser utilizado para especificar lo que ocurre con cualquier contenido dentro de una capa que exceda el tamaño de la capa como se define en el CSS. Por ejemplo, si una capa es 200 píxeles por 200 píxeles de tamaño, pero contiene una página de texto, el ajuste de desbordamiento determina cómo el texto se llenará la capa. Selecciona el rebosar atribuir a auto, oculto, voluta, o visible.
#aboutus {overflow: scroll-}He aquí una descripción de cada uno de los valores de desbordamiento que puede utilizar:
auto: Elija esta opción para que el navegador añadir barras de desplazamiento para la capa si y sólo si el contenido excede la anchura y la altura definida de la capa de forma automática.
oculto: Cuando se selecciona esta opción, el tamaño de una capa se mantiene y cualquier contenido superior a ese tamaño se corta o se acorta a la vista en una ventana del navegador.
Video: Posicionamiento - Propiedad position en css
voluta: Escoger voluta añadir barras de desplazamiento a la capa, independientemente de si el contenido se ajusta o excede anchura y la altura de la capa. Este atributo no se admite de manera uniforme por todos los navegadores, así que asegúrese de probarlo antes de publicar.
visible: Elija esta opción para que la capa de ampliar verticalmente y después horizontalmente, si es necesario, para adaptarse a cualquier contenido que exceden la anchura de la capa especificada y altura de modo que todos los contenidos son visibles.
Colocación (izquierda, parte superior, derecho, fondo): Utilice el atributo de ubicación para especificar el tamaño exacto y la ubicación (en función del tipo especificado) de un elemento de estilo en una ventana del navegador.
Por defecto, el tamaño de píxel y la colocación de un elemento se especifican para la parte superior, izquierda, inferior y bordes derecho. Sin embargo, puede utilizar otras unidades (incluyendo pt, en, cm, mm, ordenador personal, em, ex, o %) Si se desea o establecer el valor de cualquiera de los lados para auto. Para las capas, si el contenido dentro de esa capa excedan el tamaño especificado, la capa se expande para adaptarse a los contenidos.
#specialitems {left: 500px; superior: 300px; derecha: 0-bottom: 0-}acortar: Utilice este atributo para especificar un área rectangular visible más pequeño dentro de una capa con respecto al borde superior izquierdo de esa capa. Cuando recortado, el área oculta puede ser manipulado con javascript o otro tipo de programación para crear efectos especiales que se pueden ocultar y mostrar el contenido oculto.
Valores de ajuste para la zona rasurada a la parte superior, izquierda, derecha, y los bordes inferiores de la capa mediante el uso de px (píxeles), ordenador personal (Picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (Ejs), o % (Porcentaje), o un valor de auto.
#bunnygame {clip: rect (10px, 100px, 0px, 60px) -}