en este vídeo vamos a ver en acción cómo funciona position y para ello en el html tengo un dif con la clase box y box uno y otro dip que tiene también la clase box y la clase box dos en el css lo único que tenemos es las medidas de la clase box y un color distinto para cada una de las cajas en este vídeo me quiero centrar en relative que yo creo que es la más sencilla de entender para empezar a tomar contacto con cómo funciona posición aquí os he puesto lo que significa utilizar posición relativa y es que el elemento va a mantener su posición y medidas en el flujo de renderizado y también mantendrá su espacio reservado en el vídeo anterior ya vimos lo que era el flujo de renderizado y el espacio reservado además si lo movemos lo hará usando su posición en el html como punto de referencia esto es una de las cosas que más confunde a la gente así que vamos a ver cómo funciona en acción vamos a box 1 por ejemplo y le ponemos posición relativa guardamos y en principio no ha cambiado nada pero si yo ahora nuevo este elemento vamos a decirle por ejemplo que desde la izquierda se mueva 100 píxeles como veis se mueve 100 píxeles hacia la izquierda pero el espacio sigue estando reservado aquí para el navegador existe un dif con la clase box 1 y ese espacio no lo va a tocar en absoluto si yo esto lo moviera ahora hacia abajo le diéramos top 100 píxeles podríamos colocar este elemento al lado del otro y como veis el espacio sigue manteniéndose reservado sin ningún tipo de problema lo que os comentaba en el vídeo anterior del punto de referencia es porque yo esto lo estoy moviendo 100 píxeles desde la izquierda y 100 píxeles desde arriba pero si miramos mejor realmente yo no estoy moviendo la caja entera el punto de referencia es la esquina superior izquierda es decir que si aquí hubiera un punto imaginario esto se estaría moviendo 100 píxeles tanto desde arriba como desde la izquierda desde esta esquina de aquí y si trazamos esta diagonal aquí es donde tenemos 100 píxeles vamos a dejar esto como estaba y vamos a ver qué pasa si yo muevo la segunda caja vamos a darle posición relativa o para dyn bloque estar por ejemplo que es lo que quiere poner en el editor le doy posición relativa y yo ahora esto lo voy a mover 100 píxeles hacia abajo es decir desde el top 100 píxeles y como veis ha bajado a este punto sin embargo si esto mismo yo se lo doy a box 1 no se ponen en el mismo sitio eso es porque la posición desde la que se están moviendo es la que le corresponde en el html la caja coral se está moviendo 100 píxeles desde la posición inicial y la caja box 2 la verde se está moviendo a 100 píxeles desde su posición original no desde donde ella quiera sino desde donde le corresponde otra cosa que podemos hacer con la propiedad posición voy a dejar solo declarar a la propiedad posición y a dejar las cajas en su sitio otra cosa que podemos hacer es obligar a los elementos a ocupar un mismo espacio es decir yo le puedo decir todo 50 píxeles y obligar a esta caja a que se ponga por debajo de la anterior esto que está pasando aquí es lo que os contaba antes en el vídeo anterior sobre el contexto de apilamiento el hecho de que esta caja aparezca por debajo de la verde es porque en el html la caja verde aparece después si yo esto lo pusiera al revés y pusiera box 2 por encima y lo quería abrir eso voy a cerrar esto y aquí en lugar de top 50 píxeles le voy a dar botón para que pase exactamente lo contrario subimos esta caja y como veis se está colocando por encima cuando pasa esto es cuando entra en juego el contexto de apilamiento entonces es bueno que veáis cómo cómo funciona por defecto el contexto de apilamiento y es que las cajas que se colocan primero en el html son la base de ese contexto de apilamiento o de esa escalera de apilamiento vamos a dejar esto como estaba aquí box 1 y lo que vamos a conseguir ahora es que esta caja se nos salga de la vista así que vamos a borrar esto y en principio ya tenemos las dos cajas exactamente igual que al principio también quería comentaros el conflicto que hay entre utilizar top y botón y ready left si yo a esta caja le digo todo 50 píxeles ya hemos visto que baja 50 píxeles y se queda por detrás pero si yo ahora le diera un botón 25 píxeles le estaríamos diciendo que subiera pero como tenemos declarado bottom o sea dato perdón no funciona y eso es por lo que os comentaba de que si existe un botón se ignora completamente entonces si yo comento la propiedad top como veis botón funciona y ahora mismo la hemos movido 25 píxeles desde el botón con left y right pasa exactamente lo mismo si yo le digo let 50 píxeles como veis se mueve pero si yo ahora le dijera write 25 píxeles la caja no se movería ha cambiado porque le he quitado lo del voto pero sigue en su misma posición para que right funcionará yo tendría que quitar la propiedad left y de esta forma la moveríamos 25 píxeles hacia la izquierda otro detalle importante sobre posición es que todas las medidas aceptan tanto valores positivos como negativos left 50 píxeles es lo mismo que decirle right menos 50 píxeles si yo le comento left vais a ver que la caja se queda exactamente en el mismo sitio esto es algo que se puede hacer y que realmente da igual que utilicéis left 50 píxeles que wright - 50 píxeles pero en un futuro cuando hablemos sobre media queries y sobre distintos distintas formas de mover elementos vais a ver que portas cada hay ciertos valores que se pueden sobreescribir y dependiendo de la situación os va a convenir más utilizar un leaf 50 píxeles o left y un valor positivo que utilizar raid y su valor negativo esto funciona exactamente igual para todo y para bottom no se limita a esto si yo le digo el top a 100 píxeles ahora mismo tenemos la caja justo detrás de ésta pero si yo le diera todo más que midiendo 100 píxeles voy a ponerle 200 ahí para que aparezca justo por debajo esto sería lo mismo que si yo le dijera voto menos 200 píxeles para que lo podáis ver un poco mejor vamos a darle top 20 para que baje 20 píxeles pero si yo le diera botón -20 estaría exactamente en el mismo sitio porque en un caso lo estamos moviendo 20 píxeles desde la parte superior de la caja y en el otro lo estamos moviendo en 20 píxeles también desde la parte inferior de la caja entonces como veis se queda exactamente en el mismo sitio y por último para terminar este vídeo que tampoco me quiero alargar mucho quiero que veáis una cosa que confunde un poquito a la gente también que es mover un elemento que no es exactamente un cuadrado o un rectángulo así que vamos a darle a esto un border ladies de 50 píxeles y como veis lo que tenemos es un círculo si yo no le diera todo 100 píxeles y left 100 píxeles el punto donde se coloca es exactamente el mismo porque aunque nosotros estamos viendo un círculo el punto de referencia sigue siendo esta esquina de aquí que aunque no se dibuje existe si le damos a inspeccionar y nos ponemos sobre ese elemento el box 2 como veis sigue siendo un rectángulo que termina justo en esta esquina de aquí entonces tened cuidado entre lo que se ve y lo que realmente hay ya os comenté en su momento que hagáis lo que hagáis en html todos son cajas y por lo cual todo tiene esquinas y la esquina superior izquierda siempre va a ser el punto de referencia una vez dicho esto no quiero alargar más el vídeo pero sí os quiero comentar que si entendéis cómo funciona esto perfectamente y sabéis por qué los elementos se han colocado donde se han colocado ya tenéis un gran avance respecto a cómo funciona posición en el siguiente vídeo vamos a hablar sobre posición absoluta que es un poquito más complejo que relativo así que muchísimas gracias por ver este vídeo y nos vemos en el siguiente un saludo y hasta luego espero que te esté gustando esta nueva edición del curso de css y si crees que este contenido puede ayudar a alguien te animo a que lo compartas en todas tus redes sociales además si tienes alguna duda o algo que me quieras comentar te dejo en la descripción un link para que te unas a la comunidad de discos donde ya somos casi 5.000 personas que estamos dispuestos a echar un cable en cualquier cosa que necesites y si quieres estar al día de todo el contenido y no perderte nada te animo a que te suscribas haciendo clic aquí y le des a la campanita para que youtube te avise de todas las notificaciones muchísimas gracias por ver este vídeo y nos vemos en el siguiente un saludo y hasta luego