Hola a todos, bienvenidos de nuevo. Hoy, vamos a estar hablando de elementos de posicionamiento en su página web. Así que tratar de diseñar su página y su codificación probablemente va a ser una de las cosas que más consume tiempo y, potencialmente, frustrantes que va a hacer en todo este curso. Y esa es una de las razones por las que he dejado casi toda esta semana para que practiquemos el diseño de las cosas en tu página. Las ideas en sí son muy simples y sencillas, pero es el armarlas, a medida que agrega más y más a su página, donde las cosas pueden ponerse un poco complicadas. Así que comencemos a hablar de los diferentes elementos de posicionamiento, o, las diferentes propiedades de posicionamiento, que puedes usar, ¿de acuerdo? Las cuatro propiedades de posición son estáticas, relativas, absolutas y fijas, y en su mayor parte son muy diferentes. La forma en que trabajan juntos, o cómo funcionan, es que cada uno de ellos también puede ser modificado por propiedades como superior, derecha, inferior e izquierda. Así que dices qué tipo de posición quieres que sea el elemento, y luego puedes decirlo, pero quiero que esté tan lejos de la parte superior o tan alto de la parte inferior, o tan lejos de la izquierda. Así que comencemos con estática, y la razón por la que vamos a empezar con estática es porque ya lo has estado usando todo el tiempo. Es lo que llamamos el valor predeterminado para los elementos. Si no dices nada más, se va a poner en esto. Cómo funciona es que el navegador va a colocar cada elemento en la siguiente posición disponible. Puede darle valores como superior, inferior, izquierda y derecha, pero el navegador lo ignorará por completo. Cómo va a funcionar es algo como esto. Déjame ver si puedo dibujar esto aquí. Es que tienes tu pantalla. Y luego es hora de comenzar a agregar cosas a su página, y el navegador dice, oh, bueno esto es lapso, así que encaja justo aquí. Y el siguiente es el lapso, así que encaja justo aquí. Oh, ella tiene algo que está bloqueado, así que tengo que bajar aquí. Así que a medida que agrega, simplemente comienza en la parte superior, y funciona de una manera a través, y luego hacia abajo. Pero podemos ir más allá de eso. Podemos cambiar la forma en que el navegador posiciona las cosas, y una de las formas en que podemos hacerlo es usar la posición relativa. Y cuando digo relativo, quiero decir relativo a sí mismo. ¿ A dónde iría? Muy bien, vamos a patearlo un poco. Es, básicamente, muy similar a la posición estática, pero ahora puedes agregar estos desplazamientos. El nuevo posicionamiento, el nuevo lugar en el que ponemos el elemento, no va a afectar a ninguno de sus vecinos. En su lugar, lo que puede hacer es dejar agujeros donde el navegador pensó que debería haber sido en primer lugar. Por lo general, los elementos relativamente colocados se utilizan como contenedores o bloques para otros elementos. Así que permítanme mostrarles otro ejemplo rápido aquí. Enciende esto. Tengo la ventana de mi navegador, y digamos que estoy a punto de poner un elemento span, y va a ir justo allí. Bueno, en cambio, si dices que la posición es relativa, y le das algún tipo de número como el top ten, en lugar de colocarlo aquí, en realidad va a ir debajo de donde debería estar. Así que de nuevo, estamos agregando pequeños números para mover las cosas desde donde normalmente irían. La siguiente posición es lo que llamamos absoluto. Y este realmente puede confundir a las personas cuando lo inicias por primera vez, porque el navegador, en lugar de ponerlo en la siguiente posición disponible, ignora todos los elementos, y realmente solo mira el contenedor principal en el que estaba. En este caso, vamos a mostrar un ejemplo con el navegador. Los otros elementos de la página se comportan como si ni siquiera existiera. Y a lo que esto puede conducir, es que puedes terminar con un elemento encima de otro. Así que, vamos a probar esto. Tengo mi navegador. No tengo mucho espacio, aquí. Así que aquí. Y digamos que tengo un div, y he decidido que es absoluto, y debería ser un 100 por debajo de la parte superior, y tal vez un 100 por encima. Así que va justo aquí. De acuerdo, bueno, si estuviéramos haciendo familiar, el siguiente elemento iría debajo de él. Pero si tenemos dos valores absolutos, el siguiente que aparezca va a ir, de nuevo, justo encima. Muy bien, la posición final de la que voy a hablar se llama fija. Y la posición fija es relativa a la ventana del navegador. Así es como son capaces de crear estas páginas, donde a veces se obtiene esa ventana emergente, y simplemente no se puede conseguir que desaparezca. Sigues desplazándote y desplazándote, y te sigue. Bueno, cómo lo han hecho es que han usado esa posición fija. Ese elemento no se moverá incluso si la ventana está desplazada. Para que sepas si estás usando algún navegador antiguo o estás intentando diseñar para Internet Explorer 7 u 8, esto solo funciona si estás usando un DOCTYPE HTML5. Así que de nuevo cuando pienses en la posición fija piensa en cajas emergentes que simplemente no desaparecerán. O quizás también quieras pensar en ello como algo más útil, que es cuando estás en una página, y es posible que tengas esa barra de navegación que está en la parte superior, y a medida que te desplazas por la página, no tienes que desplazarte hacia arriba para ver la barra de navegación, porque siempre está ahí. Así que sigamos adelante y veamos un ejemplo donde tengo algunos elementos diferentes que usan las diferentes propiedades de posición. Vale, estoy a punto de mostrarte una página donde he entrado, y he puesto un par de elementos. Sólo dos divs, y un par de párrafos. Y para empezar, les di un poco de estilo inicial, sólo para que podamos distinguir entre ellos. Para nuestro div, posiciono relativo, le di una altura, un ancho y un borde. Para los párrafos, le di un borde de un color diferente, le di una parte superior e izquierda, y lo dejé como posición estática, porque esa es la posición predeterminada que siempre sería. Así que quiero mostrarte cómo se verá en el navegador. Así que si miras, puedes ver que tengo dos divs, uno aquí y abajo, y tengo mis tres párrafos. Uno, whoops, lo siento. Uno, dos, tres. Lo primero que quiero señalar es que esto no se ve exactamente de la manera en que algunos de ustedes pueden esperar que se vea, o incluso exactamente de la misma manera que algunos de ustedes podrían verlo si lo cargan en su navegador. En lugar de poner este párrafo todo el camino en la parte superior, en realidad es empujado hacia abajo un poco. Lo mismo para el B y el C. La razón que sucede es porque todos los navegadores tienen valores predeterminados diferentes para donde debe colocarse el párrafo. Así que, déjame desplazarme por aquí un segundo. Voy a bajar. Y puedes ver que hay un código extraño aquí que dice, -webkit- margin-antes y -webkit-margin-después. Este es un ejemplo de algunas pseudo clases que usaron. Así que no quiero que estas diferentes cosas por defecto entren en juego. Así que voy a seguir adelante y deshacerme de ellos. Después de comentar esos y comentar eso de nuevo, me refresco, y ahora tenemos nuestra A, B y C. Así que de nuevo, A, B y C, son todos relativos. Le estás diciendo al navegador, simplemente ponlo en el siguiente espacio disponible. Así que veamos qué va a suceder ahora si cambio mi elemento de relativo a estático, o lo siento, de estático a relativo. Y pueden ver que se han movido, y la razón por la que se mudaron es que le di los valores del top 100 y dejé 100. Baja, presiona. Si cambio esto a 50. Vaya, 59, eso funcionará. Puedes ver que no se mueve tanto. Entonces, estática solo ve en el primer lugar que puedas. Relativo, ve en el primer lugar que puedas, pero adelante, puedes decirle si quieres que se mueva un poco en cualquier dirección. La próxima que vamos a hacer es absoluta. Tal vez. Ahí vamos, así que ahora quiero que notes algo. Esa A y esa B, están uno encima del otro. Porque dijiste, quiero que estés 100 píxeles abajo y 59 píxeles fuera del lado del elemento contenedor. En este caso, es ese div. Así que esto es extraño porque están justo encima del otro, y todo está mezclado. Hay circunstancias en las que querrás que las cosas estén encima del otro. Tal vez uno de ellos sea visible, y uno de ellos estará oculto, y van a cambiar dinámicamente. Pero esto es lo que sucede con absoluto. Ahora, si me desplaza, voy a hacer esta pantalla un poco más pequeña, y me desplaza, puedes ver que la A y la B, se desplazan lejos. Y, por supuesto, hice este ejemplo porque quería mostrarte que si cambiaba esto a fijo ahora, en lugar de decir posicionar el elemento con respecto a su padre, diciendo posicionar este elemento con respecto a todo el navegador. Así que ahora todo está encima el uno del otro, y si trato de alejarme. No funciona. Se queda ahí, ¿de acuerdo? De nuevo, es estático, relativo, absoluto y fijo. Y quiero que juegues con estos, y conozcas tus opciones, antes de empezar a diseñar tu código a mano. Ahora, una de las cosas que les mostré es que es posible que varios elementos se coloquen en la misma posición o encima del otro. Y hay una manera de lidiar con eso si no te gusta la orden de que van a aparecer. Y eso se llama el índice Z. El índice Z es solo, básicamente, solo un valor numérico, es positivo o negativo, que le dice al navegador su orden de apilamiento. Así que si tienes algo y estás realmente seguro de que quieres asegurarte de que siempre está en la cima, seguirías adelante y pondrás algo como 100 en ella. Si realmente no te importara, podrías darle 100 negativos. Y esta es la forma en que las personas pueden seguir adelante, y posicionar los elementos para que sean un poco más dinámicos más adelante, cuando agregamos algo de JavaScript o cosas diferentes como esas. Entonces, el índice Z es algo con lo que no mucha gente codifica, pero es realmente útil cuando estás usando el elemento inspect, si hay algo a continuación, y quieres ver cómo se ve en la parte superior. Así que sigamos adelante y revisemos. Posicionar su elemento es la clave para crear los diseños que desea tener. Y esto es especialmente importante si usted está preocupado por su sitio se ve bien en una pantalla pequeña, una pantalla grande, etc. Así que la planificación adecuada va a hacer esto mucho más fácil para usted cuando llega el momento de codificar su página. Pero realmente, lo más importante que puedes hacer ahora mismo es conectarte, encontrar esos tutoriales o referencias diferentes donde hablan de posicionamiento, y jugar con él hasta que te sientas un poco más cómodo con el funcionamiento de cada uno de estos. Buena suerte.