Posicionamiento en CSS

Static position

Absolute position

Relative position

Fixed position

Positioning in web design

Para los que tengan dudas:

• Relative: si le doy coordenadas x, y se va a mover con respecto a su posicion original

• Absolute: si le doy coordenadas x, y se va a mover con respecto a la posicion 0,0 del la ventana del navegador
  o si esta contenido, pues segun el 0,0 de su padre

• fixed: si le doy coordenadas x, y se va a mover con respecto a la posicion 0,0 del la ventana del navegador
  la cosa es que este se queda fijo en el navegador asi que aunque hagas scroll se queda quieto

• sticky: como fixed solo que este tiene como un offset inicial, que cuendo scroleas arrastra el objeto al top de la ventana y se lo lleva

• Static: que va a la deriva no tiene posicion definida, solo fluye con el documento (valor por defecto) :v

• initial: es el mismo valor con el que se arranca, osea que es igual a static

• inherital: es que hereda el valor de position que tenga el padre, osea que si el padre es fixed, el tambien sera fixed

encontre esto en stackoverflow, sin duda es la mejor repuesta para aprender a diferenciarlos

¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?

Posicionamiento en CSS
El posicionamiento establece cómo van a estar ubicados nuestros elementos en la pantalla.
Hay cinco valores de posición diferentes:
• static
• relative
• fixed
• absolute
• sticky

Por si interesa en esta página hay una demo de position relative, absolute y sticky:

• https://developer.mozilla.org/es/docs/Web/CSS/position

Los Posicionamientos aparte de habilitarnos las propiedades top, botton, left, right; estos tambien nos permiten usar la propiedad Z-index (a exepción del static). La propiedad z-index basicamente nos permite controlar el orden en el que se observan los objetos, osea quien esta por encima de quien, por defecto el ultimo en renderizarse estará por encima de los demás, aunque esto también depende de su posicionamiento. Al hacer uso de z-index podemos organizar ese orden a nuestro gusto donde un elemento con un mayor z-index que otro se verá por delante. Esta propiedad es muy beneficiosa pero puede volverse una tortura sino la entendemos completamente, por ejemplo si un elemento se le cambia su opacidad aunque sea a 0.99999 este elemento se verá por encima de los demás sin importar su z-index.

Si quieren profundizar más pueden leer el sigt articulo:
https://desarrolloweb.com/articulos/propiedad-z-index.html

Un claro ejemplo de position: sticky

Pienso que sin ejemplos no se comprende totalmente.

Compañeros, les comparto este enlace donde dan ejemplos. Position-CSS

Los position pueden ser complejos al inicio pero cuando los dominas son muy fáciles.

Por ejemplo, cuando quieres ubicar un elemento con respecto a otro lo que haces es usar el relative y absolute, al elemento que usas como referencia le pones el position relative y al elemento que quieres posicionar lo poners como absolute, suele ser muy usado para posicionar mas que nada los pseudo elementos ::before y ::after.

El fixed suele ser usado cuando quieres dejar un elemento fijo en la pantalla, por ejemplo el header, o a veces en algunas páginas web cuando te aparecen al lado de la pantalla las redes sociales.

Recomiendo mucho los videos de FalconMasters, es muy bueno explicando esto y tiene contenido muy genial con respecto a diseño web y CSS ^^

Si es bastante importante, sin embargo en la practica se pdra ver la diferencia, en mi opinion, fuera sido mas amplio si hubiese el video.

Este tipo de temas deberían ser explicadas con videos, ya que son cosas un poco más complicadas que las lecciones anteriores

Buen aporte, sin embargo estos temas quedarían mucho más claros con un video.

Compañeros, aprender CSS es bastante complejo por lo que te recomiendo seguir a la par los siguientes cursos que son complemento de este:

https://platzi.com/clases/html-css/
https://platzi.com/clases/css-grid-layout/

Aquí aprenderás y conocerás los conceptos básicos de CSS de forma práctica y más clara.
¡No se desanimen! Esto puede parecer poco complejo al inicio pero se vuelve más fácil. 😀

Aquí pueden encontrar documentación detallada sobre el tema:
https://developer.mozilla.org/en-US/docs/Web/CSS

Sticky, no sabía sobre ello.
Aquí hay más sobre los Positions https://www.w3schools.com/css/css_positioning.asp

Este video explica un poco más gráficamente el tema:

Posicionamiento CSS

Considero que estas tres ultimas sesiones serian mas productivas si se exponen ejemplos y/o se ponen talleres para entender su aplicación.

que decepción encontrarme una explicacion de position asi , es un tema/propiedad super interesante para practicar y profundizar, saludos espero que mejore el contenido

En el curso de responsive design, dedican una clase entera con ejemplos a esto de las posiciones. Se los recomiendo

Les recomiendo ver dentro de la ruta Arquitectura Frontend explican el CSS positions en video para profundizar un poco mas con ejercicios prácticos: https://platzi.com/clases/1362-responsive-design/13547-css-positions/

En el curso de responsive design o desarrollo web explican Leonidas en una clase las posiciones de relative absolute y sticky

Recomiendo ver el curso definitivo de html y css del profesor degranda:
https://platzi.com/clases/html-css/

Siempre he tenido problemas con position, la verdad es que nunca me senté a leer cada uno, simplemente hacia prueba y error, no hagan eso jeje.

Los que aún no vieron el curso definitivo de HTML y CSS se los recomiendo mucho. En esta clase se explica el tema de Position en CSS: https://platzi.com/clases/2008-html-css/31058-position/

Investigaré un poco más, siento que para entenderlo mejor necesito verlo en la práctica

Seria mejor que estos temas se explicaran en vídeo, y con ejemplos practicos, Ya en en la practica se van a usar muy frecuentemente.

Creo que el posicionamiento en CSS es un tema mas complicaddo y deberia de ser mas tratado.

Pienso que este tanto los dos temas anteriores debieron ser abordados en video, sin embargo, la educación autodidacta requiere de fuentes externas siempre.

Interesante… pero seria mas memorable si lo llevamos a la práctica. Gracias!!

la teoria esta bien, pero hace falta mucha practica, seria bueno llevar el curso de desarrollo web; en donde profundizan los temas de html y mejor aun los de css con varios ejemplos

Me parece que seria bueno verlo en clase explicados con video para leer hay mucha documentación les recomiendo nos expliquen esto pero didácticamente gracias

por lo general para los que quieren que su header al hacer scroll hacia abajo siga siendo visible para los usuarios se le pone un position: sticky;

Pienso que no estaria mal una explicacion corta de cada uno en video.

en esta documentacion lo entendi mejor
https://www.w3schools.com/css/css_positioning.asp

en lo que llevo del curso he aprendido algunas herramientas y elementos que no conocía, que me han aportado a mi conocimiento pero requiere de un poco de más practica, adicional a la teoría brindada para que se complemente espero que se mejore el contenido del mismo para tener una formación más integral del mismo.

esta bien el material, pero seria mejor verlo en ejemplos explicados en video… Saludos

Que pasó con la profeeeeee!!!

Aquí un ejemplo un poco más gráfico:
https://medium.com/@jacobgreenaway12/taming-the-css-beast-master-positioning-5882bad14458

este es el cuarto curso que veo en Platzi sobre HTML y CSS y de todos me llevo algo nuevo que no sabia. Por pequeña que sea.

tambien esperaba un super video para esto ! 😡
es una de las cosas que se me complican !

Chicos, no se desanimen… Ésto son aportes teóricos para que tengamos bases en estos conceptos. ¿Quieren ahondar más? ¡Investiguen! Si bien están pagando por una educación, es pertinente que entiendan que si Platzi quisiera darnos TODA la información acerca de programación y desarrollo web, los cursos durarían años, los mismos expertos lo dicen, programar se trata de leer, investigar y buscar más allá. Cuando no entiendan algún concepto vayan a youtube y miren videos, vayan a blogs de programación e investiguen ejemplos de los conceptos que no entendieron. No nos quedemos con lo del curso solamente, ánimo con ese espíritu curioso pues 😃

Tengo nociones básicas de html y css, y hasta ahora creo que me equivoque al pagar la suscripción de platzi con este curso, mucha teoría poca practica, esta teoría se puede encontrar en cualquier parte y seguirla, me esperaba otra cosa de este curso espero que en lo que sigue mejore, pero sin duda falta mucha practica como dice el dicho la practica hace al maestro, si bien esta bien la teoría creo que falta dedicación a la hora de enseñarla, tengo un curso de 9 dolares en otra plataforma y le da mil vueltas a este, repito hasta el momento veremos lo que sigue.

Aquí hay un buen ejemplo de cómo funciona el Sticky: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

Esta información es genial durante mucho tiempo busque de entender esto pero nunca me quedaba claro

Bueno ya muchas cosas esenciales las han dejado por fuera de las clases en video. Mala cosa

Se hubiera agradecido que todo se hubiera explicado en video, no es por ofender pero hasta un curso gratuito de youtube se toma la molestia de explicar estos atributos tan usados…

Genial la propiedad sticky, siempre pensé que era muy difícil crear ese efecto.

Me hacen falta muchas cosas, ejemplos, cual es mejor usar en diferentes casos, como y en qué elementos es mejor usar cada uno. Estoy un poco decepcionado con éste curso.

Siempre es bueno repasar estos conceptos porque te ayudan a recordarlos y entenderlos mejor

Mi talón de aquiles 😦

Para los que tengan dudas les recomiendo estas partes de Freecodecamp:

position relative:

• https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-an-elements-relative-position
• https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets

position absolute:

• https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning

position fixed:

• https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning

.

💡 Recomiendo que empiecen con position relative aunque ya sepan cómo funciona, ya que avanza progresivamente.

Este video me ayudo mucho

Aquí hubiese sido bueno un ejemplo en video, para poder comprender que hace cada una de las propiedades.

Buen contenido, sin embargo creo que sería mejor que estos temas se explicaran en video

Un uso divertido de fixed es con los header sirve para que este siempre siga al usuario

Ya había visto esa función en algunas páginas, hasta hoy supe que se llama sticky

buena información hubiese sido bueno colocar ejemplos de ello de parte del curso o mini ejercicios para ir probando las propiedades para practica

Este tema es muy importante saberlo, no entiendo el poco esfuerzo y dedicación que le dieron 😕 Una simple googleada puede darte más información que esto.

Hubiera estado mejor una explicación en video, aunque supongo que ya hay otro curso que lo explica a detalle

sigo leyendo y tratando de entender todo!!! a no desanimar y seguir aprendiendo!
De estudiar nunca pares! (Yoda)

Si no les quedo claro, pueden ver esta clase
https://platzi.com/clases/2008-html-css/31058-position/

Aqui tambien explica como es el posicionamiento en css
https://css-tricks.com/almanac/properties/p/position/

Buena teoría, pero recuerden practicar mucho.

muy buena información

la perfeccion explicada!

Todo claro, sin embargo: https://www.w3schools.com/css/css_positioning.asp

Justo esta parte hubiese estado buenísima en video, con animaciones y ejemplos. Para leer lo busco en internet. baja muchísimo la calidad de la plataforma este tipo de cosas, uno paga por un curso explicado por alguien que sabe supuestamente, espera además recibir un feedback mínimamente… gato por liebre

aqui podemos profundizar mas sobre position

https://www.youtube.com/watch?v=OWKXEJN67FE&t=4016s

Muy buena informacion, pero sería mejor con ejemplos concretos.

Seria interesante que hubiera una forma de tener pagina guardadas para cuando se necesiten consultarla sin necesita de entrar en le curso y ponerse a buscar la clase especifica

Current Position: Understood

Siempre es uno de los temas más difíciles en CSS, es bueno repasarlos Saludos!

Tristemente no me queda claro.

Tengo que practicar el Position.💚🚀💻

Aun hay mucho por aprender

gracias

Con la falta de ejemplos me siento un poco perdido 😦

Muy buenas descripciones, pienso que ayudan a más de uno a entender esas propiedades.

Me encantan estos posts… información precisa y útil! 👍🏽

deberia haber un archivo para descargar y tener esta informacion, o un video donde se pueda practicar

wow me sorprende la forma tan sencilla y comprendible de esta explicacion, vale oro este resumen

Buena Información , Un ejemplo de Position --> fixed , seria por ejemplo , si se quiere crear un chat que este fijo siempre en alguna parte del navegador , con eso el usuario siempre lo tendra disponible.

la diferencia entre position absolute y relative, es que en position abosolute el elemento no guarda su espacio en el que estaba inicialmente, pero en position relative tu lo puedes mover a donde quieras y ningun otro elemento ocupara el espacio inicial del primero😉

Tener en cuenta que position:sticky no funcionara si es descendiente (sin importar el nivel) de una tique que tenga un estilo de overflow: hidden sin importar que su padre directo tenga scroll

que diferencia hay con el display?, no lo se, no me esta gustando mucho este curso, muchas explicaciones de este tipo… me recuerda a las clases en linea de las primarias… “lee esto y ya”

Aquí les dejo documentación sobre position
https://developer.mozilla.org/es/docs/Web/CSS/position

Se debe profundizar más!

es interesante conocer las propiedades porque luego las usamos y no sabemos su funcionamiento!

Conocía las 5 primeras opciones.
Sin embargo, porque han puesto el texto como imagen, hubiese sido mejor ponerlo como texto para poder copiarlo.

Aquí les comparto estas dos documentaciones para poder investigar más acerca del posicionamiento en CSS. 😃
https://developer.mozilla.org/es/docs/Web/CSS/position
https://www.w3schools.com/css/css_positioning.asp

Excelente contenido

Es un gran resumen

Con las notas que tomaron aquí, les comparta la que realice, escogiendo lo mejor que vi, sobre el posicionamiento en CSS.

Posicionamiento en CSS.

La propiedad position controla el tipo de posicionamiento utilizado por un elemento, dentro de sus elementos padres

Los elementos con el valor Static no reconocen los valores top, bottom, right y left

div {position:static;}

Si esto entra en el examen… Mmmmmmmmmm (Sin comentarios)
🤨🤨🤨😐😐😐

Uno de los mejores aportes que se puede tener sobre CSS, el posicionamiento.