En este artículo, discutiremos dos propiedades CSS muy similares que son position: sticky y position: fixed .
La propiedad Position en CSS especifica el posicionamiento de un elemento o entidad HTML. La posición del elemento se puede establecer especificando las propiedades superior, derecha, inferior e izquierda. Estos especifican la distancia de un elemento HTML desde el borde de la ventana gráfica. Para establecer la posición por estas cuatro propiedades, tenemos que declarar el método de posicionamiento. Hay cinco propiedades de posicionamiento disponibles en CSS:
- Corregido : la posición del elemento se colocará en relación con la ventana gráfica.
- Estático : Los elementos se posicionarán según el flujo normal de la página.
- Relativo : el elemento permanece en el flujo normal del documento pero afecta a la izquierda, derecha, arriba y abajo.
- Absoluto : la posición del elemento será relativa al antepasado posicionado más cercano.
- Adhesivo : el elemento con posición: adhesivo y superior: 0 jugó un papel entre fijo y relativo en función de la posición en la que se coloca.
Discutiremos solo la posición: propiedades fijas y pegajosas. Ambos se utilizan para fijar el elemento en una determinada posición en la página HTML. Consulte el artículo Elementos de posicionamiento CSS para obtener más detalles.
La posición: fijo significa fijado a la ventana gráfica. Proporcionamos los valores de posición (superior, inferior, derecha o izquierda) y el elemento permanece allí cuando el usuario se desplaza. No importa lo que suceda en la pantalla, el elemento fijo no se moverá en absoluto.
Sintaxis:
selector {
position: fixed;
}
Ejemplo: cuando usamos la posición: propiedad fija, el elemento permanece fijo en su posición independientemente de lo que suceda en la pantalla, está fijo en la ventana gráfica.
HTML
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.fixed {
position: fixed;
background: #088523;
color: #ffffff;
padding: 30px;
top: 250;
left: 10;
}
span {
padding: 5px;
border: 1px #ffffff dotted;
}
</style>
</head>
<body>
<div class="fixed">This div has
<span>position: fixed;</span>
</div>
<h1>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</h1>
</body>
</html>
Producción:
La posición: pegajosa significa que el elemento se desplazará hasta que alcance el valor de compensación que le dio el usuario y luego permanecerá en su posición. El elemento adhesivo siempre permanece dentro de su bloque principal y tan pronto como el bloque principal abandona la pantalla como efecto del desplazamiento, los elementos adhesivos también lo hacen.
Sintaxis:
selector {
position: sticky;
}
Ejemplo: cuando usamos la propiedad position: sticky , el elemento se desplaza hasta que toca la parte superior, se fijará en ese lugar a pesar de seguir desplazándose.
HTML
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.sticky {
position: sticky;
background: #088523;
color: #ffffff;
padding: 30px;
top: 0;
left: 10;
}
span {
padding: 5px;
border: 1px #ffffff dotted;
}
</style>
</head>
<body>
<h1>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<div class="sticky">This div has
<span>position: sticky;</span>
</div>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
<br/>
<br/>
What We Offer We provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses, Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</h1>
</body>
</html>
Producción:
Diferencia entre posición: fija y posición: pegajosa propiedad:
S. No. |
Posición: fijo |
Posición: Pegajoso |
|---|---|---|
| 1. |
Elemento con posición: la propiedad fija se fija en la ventana gráfica y no se mueve independientemente del desplazamiento. |
Elemento con posición: la propiedad adhesiva puede desplazarse a un valor de desplazamiento proporcionado por el usuario. |
| 2. |
Elemento con posición: la propiedad fija nunca deja la posición de la ventana gráfica en la que se fijó. |
Elemento con posición: la propiedad adhesiva deja la ventana gráfica cuando su elemento principal se desplaza fuera de la ventana gráfica. |
| 3. |
Esta propiedad es compatible con todos los navegadores. |
Esta propiedad solo es compatible con todos los navegadores modernos. |
| 4. | Elemento con posición: la propiedad fija no afecta el flujo del otro elemento en la página, es decir, no captura espacio adicional. | Elemento con posición: la propiedad pegajosa afecta el flujo del otro elemento en la página, es decir, ocupará el espacio adicional. |
Navegadores compatibles:
posición: fija es compatible con:
- Google Chrome 1.0
- Internet Explorer 7.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 4.0
- Safari 1.0
position: sticky es compatible con:
- Google Chrome 56.0
- Microsoft Edge 16.0
- Firefox 32.0
- Ópera 43,0
- Safari 13.0
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA