Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Torrent
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo ejecutar dos WhatsApp en un smartphone?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Kerish Doctor 2022 - Licencia gratis

    Kerish Doctor 2022 - Licencia gratis

    GNU/linux

    GNU/linux

    TrueCrypt

    TrueCrypt

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    TrueCrypt

    TrueCrypt

    El ABC de la detección y prevención del phishing

    El ABC de la detección y prevención del phishing

    Protocolos de seguridad en redes inalambricas

    Protocolos de seguridad en redes inalambricas

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Actividades en pareja para salir de la rutina

    Actividades en pareja para salir de la rutina

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Como ayuda el ajo para tu salud

    Como ayuda el ajo para tu salud

    Cómo remover las uñas de acrílico en casa

    Cómo remover las uñas de acrílico en casa

    Voluminizadores de Labios naturales para hacerlos tu misma

    Voluminizadores de Labios naturales para hacerlos tu misma

    Beneficios del Té de manzanilla

    Beneficios del Té de manzanilla

    ¿Qué es el adoquín con efecto fotocatalítico?

    ¿Qué es el adoquín con efecto fotocatalítico?

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    El progreso del Yoga antes y ahora

    El progreso del Yoga antes y ahora

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK Facebook

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Noticias » Cómo funciona realmente la posición de CSS Sticky

Cómo funciona realmente la posición de CSS Sticky


Por Tutoriales En Linea - En: Noticias, Diseño Web, CSS3, html5, WebSite, webmasters, Tutorial 0 03-07-19

4К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email
En esta ocasión en tutoriales en linea mostraremos cómo funciona realmente la posición de CSS Sticky o Pegajosa. Hoy la consideramos una propiedad muy útil de posicionamiento en CSS - Sticky. Se anunció en 2016, pero hace poco apareció un buen soporte de navegador.

Cómo funciona realmente la posición de CSS Sticky
Y la razón es que la posición: Sticky; Muy poco utilizado por los desarrolladores, muy probablemente debido a que desde el momento del lanzamiento y el momento de soporte de esta propiedad por parte de los principales navegadores es muy grande, simplemente fue olvidado por este. Sí, y la lógica, aunque simple, y la primera vez, seguro, todo funcionará hasta la primera unión.

Hoy en día en muchos diseños web se plantea el menú en Sticky, normalmente por razones de usabilidad. Este tutorial resulta muy útil para resolverlo mediante CSS.

Hasta mayo de 2016, solo había 4 opciones para posicionar un elemento en una página: estática, relativa, absoluta y fija (estática, relativa, absoluta, fija). Todo el mundo sabe eso. La posición estática y relativa conservan su posición en el flujo general del documento, pero la absoluta y la fija no. Su posición es eliminada y tienen un comportamiento "flotante". Pero ahora no voy a entrar en los detalles de cada una de las propiedades de la posición.
Elementos Sticky
El posicionamiento fijo ha asumido las capacidades de cada una de las 4 opciones para la posición y es más como fijo. Se utiliza para arreglar el elemento pero no en una posición determinada, como lo hace la reparación, sino en una ubicación determinada del contenedor cuando se desplaza por la página. Es muy conveniente utilizarlo en el menú o la navegación, así como en el encabezado de la tabla.

Posición CSS : Sticky  - pegajosa: Mantiene los elementos posicionados como "fijos" o "relativos" en función de cómo aparezcan en la ventana gráfica. Como resultado, el elemento se "bloquea" cuando es necesario mientras se desplaza.
Es muy fácil de usar:
.block {
  position: sticky;
  top: 0;
}
En este ejemplo, prescribí una posición "pegajosa" y top: 0; He indicado un punto donde, cuando se desplaza, el elemento se vuelve fijo, pero no pierde sus otras propiedades, como si acabara de aplicar la posición: fijo;

Por qué la posición Sticky ¿puede que no funcione?


Es muy importante entender que la posición pegajosa no funcionará si la altura o el ancho del contenedor principal era mayor que el tamaño del elemento.
<style>
  .sticky{
     position: sticky;
     top: 0;
  }
</style>

<div class="wrapper">
   <div class="sticky">
      Cualquier contenido...
   </div>
</div>
En esta variante, la adherencia no funcionará, porque no se especifica una altura para el elemento de envoltura. En otras palabras, para el elemento adhesivo debe crear un contenedor en el que se ubicará. No puede tener espacio como en el caso de absoluto o fijo.

En consecuencia, para el elemento de envoltura, debe agregar una altura específica o estirarla a una altura con algún contenido. Es muy importante recordar y comprender que al asignar un posicionamiento adhesivo a un elemento, su contenedor principal se convierte automáticamente en "adhesivo" y el elemento adhesivo no puede ir más allá del contenedor adhesivo.

Aquí está el resultado del trabajo:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Navegación pegada</title>
  <style>
   .wrapper {
    min-height: 1000px; /* Altura minima */
   }
   .header, .sticky {
    color: #fff; /* Color del texto */
    padding: 10px;  /* Sangría*/
   }
   .header {
    background: #009d4b; /* Color de fondo */
   }
   .sticky {
    background: #3989c9; /* olor de fondo  */
    position: sticky; /* Posicionamiento pegajoso */
    top: 0; /* Posición en la parte superior */
   }
   .content {
     padding: 20px 10px; /* Sangría */
   }
   .footer {
     background: #f9f9f9; /* olor de fondo  */
     padding: 10px; /* Sangría */
   }
  </style>
 </head>
 <body>
  <div class="wrapper">
    <header class="header">Nombre del sitio</header>
    <nav class="sticky">Navegación del sitio</nav>
    <div class="content">Cualquier contenido</div>
    <footer class="footer">Pie de página del sitio</footer>
  </div>
 </body>
</html>
Ver resultado

Conclusión


Posición: Sticky - pegajosa; - muy util para hacer que el menú se mantenga en la parte superior de la pantalla, dos líneas son suficientes para el elemento de menú en .css, ¡no es un alto! ¿Alguna pregunta? Por favor en los comentarios!
Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Datos estructurados para DataLife...
Articulo siguiente No pierdas tiempo con las web de ...
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Tutoriales En Linea
Tutoriales En Linea
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: CEO de Tutoriales En Linea:
https://tutorialesenlinea.es
Fundador y CEO deTutoriales En Linea...Leer mas...

Post Relacionados

CryptoShuffler troyano que roba Bitcoins

CryptoShuffler troyano que roba Bitcoins

Datos estructurados para DataLife Engine

Datos estructurados para DataLife Engine

Los retiros esta deshabilitados en Mudet - Obsoleto - Dominio vendido

Los retiros esta deshabilitados en Mudet - Obsoleto - Dominio vendido

Es posible extraer Bitcoin en mi PC

Es posible extraer Bitcoin en mi PC

Decoloración en CSS a través del modo de mezcla

Decoloración en CSS a través del modo de mezcla

Qué es el Shadow DOM

Qué es el Shadow DOM


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Cómo crear un USB de arranque para instalar Windows 10

Cómo crear un USB de arranque para instalar Windows 10

12-Octubre
Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

10-Octubre
Herramienta de analisis de tus problemas de SEO

Herramienta de analisis de tus problemas de SEO

18-Mayo
Como activar Windows 10 con KMSAuto

Como activar Windows 10 con KMSAuto

14-Junio

Últimas publicaciones

Lista IPTV con canales para España

Lista IPTV con canales para España

Por Tutoriales En Linea 06-02-2377
¿Cómo hacer crecer su pequeña empresa en línea?

¿Cómo hacer crecer su pequeña empresa en línea?

Por Sachin Agrawal 06-02-23121
Lista IPTV con canales para Latinoamerica

Lista IPTV con canales para Latinoamerica

Por Dianna 03-02-23207

Etiquetas

positionTutoriales En LineaCSS3ArticulosCSSstickyPropiedadesNoticiasHTMLPostHTML5comportamientoflujoDiseñoDiseño web adaptativoDiseñadores WebDiseñadores





Sobre nosotros

Tutoriales En Linea

Es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad. Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.