Posicionamiento CSS: Explicación de la posición absoluta y relativa
La optimización para motores de búsqueda (SEO) suele consistir en realizar pequeñas modificaciones en partes de su sitio web. Cuando se ven individualmente, estos cambios pueden parecer mejoras incrementales, pero cuando se combinan con otras optimizaciones, podrían tener un impacto notable en la experiencia del usuario de su sitio y el rendimiento en los resultados de búsqueda orgánica. Es probable que ya esté familiarizado con muchos de los temas de esta guía, ya que son ingredientes esenciales para cualquier página web, pero es posible que no les esté sacando el máximo partido.
Un archivo robots.txt indica a los motores de búsqueda si pueden acceder y, por tanto, rastrear partes de su sitio. Este archivo, que debe llamarse robots.txt, se coloca en el directorio raíz de su sitio. Es posible que las páginas bloqueadas por robots.txt puedan seguir siendo rastreadas, así que para las páginas sensibles, utilice un método más seguro.
Es posible que no quiera que se rastreen ciertas páginas de su sitio porque podrían no ser útiles para los usuarios si se encuentran en los resultados de búsqueda de un motor de búsqueda. Tenga en cuenta que si su sitio utiliza subdominios y desea que no se rastreen determinadas páginas en un subdominio concreto, tendrá que crear un archivo robots.txt independiente para ese subdominio. Para obtener más información sobre robots.txt, le sugerimos esta guía sobre el uso de archivos robots.txt.
Tutorial de posicionamiento CSS #9 – Posición absoluta
Hay alrededor de 200 propiedades CSS en total, dependiendo de dónde se mire. Y, muchas de esas propiedades interactúan entre sí en sus propias formas únicas. Hacer un seguimiento de todo es prácticamente imposible. Por lo tanto, este artículo trata de mostrar trucos ingeniosos de CSS que son útiles tanto para los desarrolladores como para los diseñadores.
El CSS se encuentra en un buen momento. Las nuevas características que se están introduciendo están ayudando a solidificar CSS como un verdadero lenguaje de scripting. Sabemos que se ha hecho un borrador de propuesta para introducir las sentencias @when & @else. Aunque no está disponible ahora mismo, sienta un precedente para el potencial futuro de escribir lógica condicional usando CSS.
En mi experiencia, es bastante fácil pasar por alto las características existentes a menos que se compruebe constantemente si hay actualizaciones. Propiedades como is() y where(), pero también attr(), existen desde hace tiempo, pero son fácilmente eclipsadas por el potencial de los frameworks modernos.
Mi inspiración para este artículo viene directamente de mi experiencia de trabajar con WordPress a diario. Llevo más de 10 años utilizando WordPress. Y durante ese tiempo, debo haber escrito más de 10.000 líneas de CSS para personalizar varios diseños de temas.
Un par de cosas geniales que puedes hacer con la pegatina de posición CSS
En este capítulo, veremos cómo se pueden utilizar las distintas propiedades de diseño de CSS para influir en el tamaño, la posición y el diseño general de una página. También he incluido una serie de rompecabezas para ayudarte a repasar lo que has aprendido en los capítulos anteriores.
Este capítulo está organizado por casos de uso más que por propiedades o características. En primer lugar, hablaré sobre el tamaño y el posicionamiento, y luego me centraré en dos casos de uso específicos: los diseños basados en cuadrículas y el centrado horizontal y vertical.
Transferencia de altura. A diferencia de los documentos HTML básicos, las aplicaciones web suelen querer aprovechar todo el espacio disponible en la ventana gráfica evitando el desplazamiento. Sin embargo, un documento HTML típico contiene varios elementos raíz que son display: block por defecto. Si esos bloques no tienen una altura especificada, simplemente utilizarán la altura de su contenido en lugar de la altura de la ventana gráfica. El siguiente fragmento obliga a las etiquetas html y body a ocupar el 100% de la altura de la ventana gráfica, lo que permite utilizar porcentajes en el marcado posterior para referirse a la altura de la ventana gráfica:
5 trucos de css que todo desarrollador web debe conocer en 2022
Puedes crear hermosas páginas web utilizando pequeños y sencillos trucos CSS como el posicionamiento absoluto con tus imágenes. Este post te enseña a utilizar el posicionamiento absoluto para mejorar tu diseño web.
Antes de llegar a cómo puedes hacerlo, vamos a hablar de lo que es el posicionamiento absoluto. Hay cinco maneras de posicionar elementos en una página: estática, relativa, absoluta, fija o pegajosa. Por defecto, todos los elementos de la página tienen una posición estática.
El posicionamiento absoluto de un elemento eliminará ese elemento del flujo de trabajo de la página y hará que se comporte independientemente de todos los demás elementos de la página. El elemento posicionado absolutamente sólo puede ser posicionado en referencia a su elemento padre. Si no tiene un elemento padre, el elemento HTML será su padre. La clave para posicionar de forma absoluta un elemento dentro de otro elemento es hacer relativa la posición del elemento padre y hacer absoluta la posición del elemento hijo:
En nuestro ejemplo, el elemento que contiene la imagen tiene un posicionamiento absoluto y su padre directo que es el elemento div con la clase .container tiene una posición relativa. Además, una pequeña nota: Normalmente, escribimos “position: absolute;” o “position: relative” en nuestro archivo CSS para hacer que un elemento tenga una posición relativa o absoluta pero como estamos usando Bootstrap, podemos aprovechar las utilidades abreviadas de Bootstrap para configurar el posicionamiento. Podemos simplemente dar a los elementos de la etiqueta clases de posicionamiento rápido como .position-static, .position-relative, .position-absolute, .position-sticky y .position-fixed.