1
00:00:00,910 --> 00:00:07,469
Bueno, pues ahora vamos a ver cómo posicionar elementos dentro de una página web. Esto es bastante importante también, ¿vale?

2
00:00:09,310 --> 00:00:18,629
Para ello hemos partido de un trabajo anterior, ¿vale? Del último que hicimos, que era el de los márgenes y el relleno, ¿vale?

3
00:00:18,929 --> 00:00:30,050
Simplemente, como veis, lo que yo hago es que borro todo el contenido, ¿vale? Y dejo solo el titulito, ¿vale? Simplemente, ¿vale?

4
00:00:30,370 --> 00:00:38,869
Dejo también el body y estas propiedades que habíamos definido

5
00:00:38,869 --> 00:00:40,909
Y que hemos dicho que vamos a ir manteniendo siempre, ¿vale?

6
00:00:41,329 --> 00:00:46,130
Y como veis aquí, pues he puesto posicionamiento de elementos con CSS, ¿vale?

7
00:00:46,390 --> 00:00:50,750
Y el archivo se llama posicionar barra baja elementos punto html

8
00:00:50,750 --> 00:00:54,549
Vale, pues entonces, vamos a empezar

9
00:00:54,549 --> 00:00:57,549
Vamos a empezar con el contenido de html, ¿vale?

10
00:00:57,549 --> 00:01:07,090
Entonces aquí ponemos una cabecera de nivel 1, posicionamiento de elementos con CSS, ¿vale?

11
00:01:08,450 --> 00:01:12,890
Y ahora, en primer lugar vamos a poner una caja contenedora, un div, ¿vale?

12
00:01:13,290 --> 00:01:17,730
Ese div le vamos a poner un id que va a ser contenedor, ¿vale?

13
00:01:18,650 --> 00:01:22,769
Y dentro de ese div vamos a poner 12 div más, ¿vale?

14
00:01:22,870 --> 00:01:25,250
Pero para eso vamos a utilizar un atajo de m, ¿vale?

15
00:01:25,250 --> 00:01:40,250
Lo podéis hacer manualmente, como siempre digo, ¿vale? Ese atajo sería poner div y como queremos poner 12 cajas, pues pondremos por 12, ¿vale? Pero aparte yo quiero que esas cajas pertenezcan a una clase, ¿vale?

16
00:01:40,250 --> 00:01:49,930
Pues si quiero que pertenezcan a una clase, simplemente pongo corchetes y dentro pongo la palabra class igual y azul, ¿vale?

17
00:01:50,170 --> 00:01:55,510
Y fijaros, pongo azul sin ponerlo entre comillas, él solito lo va a poner luego entre comillas, ¿vale?

18
00:01:56,290 --> 00:02:00,430
Cogemos ahora ese div, lo copiamos, lo ponemos aquí debajo, ¿vale?

19
00:02:00,870 --> 00:02:05,609
Y ahora simplemente lo que hacemos es que le damos al tabulador, ¿vale?

20
00:02:06,310 --> 00:02:11,870
Fijaros que al darle al tabulador me salen 12 bits, ¿vale?

21
00:02:13,129 --> 00:02:20,889
Y lo único que vamos a hacer aquí es que al segundo vamos a borrar la clase y le vamos a poner un id que va a ser verde.

22
00:02:22,310 --> 00:02:22,750
¿Vale?

23
00:02:22,750 --> 00:02:27,370
Y ahora vamos a empezar a modificar estos estilos.

24
00:02:28,490 --> 00:02:31,509
Vamos a empezar con el contenedor, ¿vale?

25
00:02:32,909 --> 00:02:33,629
Contenedor.

26
00:02:33,629 --> 00:02:49,150
Y a este contenedor lo que le vamos a hacer es que le vamos a dar una anchura de 800 píxeles y le vamos a dar una altura automática, ¿vale? Y aparte le vamos a poner un borde de un píxel sólido, ¿vale?

27
00:02:49,150 --> 00:03:02,349
¿Vale? Fijaros que cuando yo hago esto, lo que me sale es una línea horizontal sin altura. ¿Por qué? Pues porque los diferentes elementos div que yo tengo dentro no tienen una altura definida.

28
00:03:02,449 --> 00:03:15,150
Entonces, como no tienen una altura definida, pues realmente es como si no existieran ahora mismo. ¿Vale? Hasta que yo a ellos no les dé una altura, esa altura del contenedor no se definirá de forma automática.

29
00:03:15,150 --> 00:03:28,060
¿Vale? Entonces, ahora lo que vamos a hacer es definir tanto los elementos verdes como los elementos azules. ¿Vale? Como el elemento verde es un id, ponemos almohadilla verde.

30
00:03:28,500 --> 00:03:37,599
Y si ahora yo pongo una coma, puedo añadir otro tipo más. ¿Vale? Y en este caso, como queremos definir la clase azul, pues ponemos punto class. ¿Vale?

31
00:03:37,599 --> 00:03:41,819
Ponemos, perdón, punto clase, no, pondríamos punto azul, ¿vale?

32
00:03:43,960 --> 00:03:50,219
Importante, ¿por qué todos los elementos le hemos puesto clase menos uno que le hemos puesto un id?

33
00:03:50,360 --> 00:03:56,639
Pues porque los que pertenecen a la misma clase van a ser iguales y el id es un identificador único,

34
00:03:56,759 --> 00:03:58,740
por lo tanto, solo ese va a ser diferente, ¿vale?

35
00:03:59,020 --> 00:04:01,439
Pero ellos dos pueden compartir propiedades.

36
00:04:01,439 --> 00:04:07,599
De hecho, les vamos a hacer que compartan, en este caso, van a compartir la anchura, ¿vale?

37
00:04:08,120 --> 00:04:09,919
Que va a ser de 100 píxeles.

38
00:04:10,860 --> 00:04:14,259
Van a compartir la altura, que también va a ser de 100 píxeles.

39
00:04:14,379 --> 00:04:21,699
Y fijaros cuando ponga esto, cómo aumenta el tamaño del elemento contenedor, ¿vale?

40
00:04:23,199 --> 00:04:24,079
Fijaros, ¿vale?

41
00:04:25,160 --> 00:04:30,019
Le vamos a poner un borde de un píxel sólido, ¿vale?

42
00:04:30,019 --> 00:04:48,480
Ahí veis las cajitas y le vamos a poner un margen por abajo de 12 píxeles, ¿vale? Y ya veis ahí todos los elementos, ¿vale?

43
00:04:48,480 --> 00:05:11,540
Y ahora vamos a modificar exclusivamente, ¿vale? Exclusivamente el elemento verde, ¿vale? Al elemento verde vamos a empezar poniéndole un color de fondo. ¿Y qué color de fondo le vamos a poner? Pues evidentemente el verde, ¿vale? 00FF00.

44
00:05:11,540 --> 00:05:16,160
Y debajo vamos a modificar la clase azul, ¿vale?

45
00:05:16,959 --> 00:05:23,149
Y a esta le vamos a poner otro color de fondo y le vamos a poner el azul, ¿vale?

46
00:05:23,269 --> 00:05:26,470
Que es 0000FF, ¿vale?

47
00:05:27,250 --> 00:05:34,009
Entonces aquí tenemos, fijaros, mis 12 cajitas, todas azules menos una que es verde, ¿vale?

48
00:05:34,310 --> 00:05:37,290
Entonces vamos a trabajar el posicionamiento, ¿vale?

49
00:05:37,290 --> 00:05:52,569
Entonces, para fijar el posicionamiento, lo que vamos a hacer es utilizar una propiedad, ¿vale? Que se llama position, ¿vale? Una propiedad que se llama position.

50
00:05:52,569 --> 00:06:13,620
Entonces, nos vamos a ir aquí al verde, ¿vale? Que es el elemento que queremos mover y vamos a poner position, ¿vale? Entonces, fijaros. Bueno, voy a poner aquí unos pequeños comentarios. Para posicionar utilizamos position, ¿vale?

51
00:06:13,620 --> 00:06:40,759
¿Y cuáles son las propiedades que tiene esto? Pues tiene static, que sería por defecto, es decir, que se queda en la posición donde nosotros lo hayamos puesto, ¿vale? Tenemos relative, ¿vale? Que toma como referencia la esquina superior izquierda, ¿vale? Del elemento contenedor, en este caso de la caja, ¿vale? No de la caja contenedor, no de la página web, ¿vale? Importante, ¿vale?

52
00:06:40,759 --> 00:07:08,279
Luego tenemos absolute, ¿vale? Que toma como referencia la ventana del navegador o elemento padre, ¿vale? Es decir, elemento que está justo por encima. Y por último, fix, que sería elemento fijo en la página, ¿vale?

53
00:07:08,279 --> 00:07:14,860
Y vamos a ir viendo todo esto de forma diferente, ¿vale?

54
00:07:15,399 --> 00:07:21,839
Entonces, en primer lugar, vamos a probar a hacer un posicionamiento relativo, ¿vale?

55
00:07:22,759 --> 00:07:24,720
Un posicionamiento relativo.

56
00:07:24,819 --> 00:07:28,500
Entonces ponemos relativo, ¿vale?

57
00:07:29,060 --> 00:07:35,519
Y ahora, para posicionarlo, lo que hacemos es que vamos a utilizar las propiedades, por ejemplo, left, ¿vale?

58
00:07:35,519 --> 00:07:55,839
Esto sería un posicionamiento relativo en la parte izquierda de 90 píxeles, ¿vale? Entonces, fijaros cómo hemos desplazado la caja hacia la izquierda, ¿vale? Y en el top, ¿vale? Vamos a poner, por ejemplo, 80 píxeles, ¿vale?

59
00:07:55,839 --> 00:08:22,029
Entonces, respecto del contenedor, ¿vale? Es decir, respecto de esta esquina que os estoy marcando con el ratón, tendríamos 80 píxeles y 90 píxeles, ¿vale? ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? Tenemos la posición, tenemos la forma de ponerlo con referencia absoluta, ¿vale?

60
00:08:22,029 --> 00:08:37,450
Fijaros que yo ahora pongo aquí, en vez de relative, pongo absolute, ¿vale? Fijaros que ese posicionamiento lo hace respecto del inicio de la página, ¿vale? Desde donde comienza la web, ¿vale?

61
00:08:37,450 --> 00:08:53,019
Y por último tenemos la opción Fix, ¿vale? Que fijaros que cuando yo pongo la opción Fix da la sensación que es lo mismo que Absolute, pero voy a hacer scroll hacia abajo.

62
00:08:53,019 --> 00:09:14,960
Y fijaros lo que pasa. El elemento se viene conmigo, ¿vale? De hecho, si os dais cuenta, cuando yo pongo aquí absolute, el elemento se ha movido, ¿vale? Si yo pongo relative, fijaros cómo al poner relativo, el elemento se ha movido dejando un hueco.

63
00:09:14,960 --> 00:09:33,620
Pero si yo pongo absolute, de repente ese hueco lo cubre un azul, ¿vale? 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 y 11. Es decir, cuando pongo la referencia absoluta, el hueco que él deja lo cubre otro elemento, ¿vale?

64
00:09:33,620 --> 00:09:56,059
Y sin embargo, si yo bajo, la cajita azul se sigue quedando arriba, pero si pongo Fix, la cajita se viene conmigo a donde yo vaya, ¿vale? Entonces, si yo no quiero que ese hueco se ocupe, ¿vale? Como pasaba con el Absolute, ¿vale?

65
00:09:56,519 --> 00:10:04,419
Fijaros, si yo pongo aquí absolute, yo me voy ahora a mi elemento contenedor, ¿vale?

66
00:10:05,080 --> 00:10:12,590
Y en mi elemento contenedor voy a poner yo también position y voy a poner relative, ¿vale?

67
00:10:13,429 --> 00:10:19,590
Entonces, el contenedor está posicionado de forma relativa respecto del elemento padre, que es la caja, ¿vale?

68
00:10:19,730 --> 00:10:20,850
Que es la caja anterior.

69
00:10:20,850 --> 00:10:29,590
Y ahora este elemento está posicionado respecto de mi propia web, ¿vale?

70
00:10:30,889 --> 00:10:34,309
Entonces así también tendríamos como un doble control, ¿vale?

71
00:10:37,269 --> 00:10:42,350
Pues ya está. Esto en cuanto a posicionamiento, ¿vale?

72
00:10:42,730 --> 00:10:46,429
Propiedades. También tenemos propiedades bottom, ¿vale?

73
00:10:46,570 --> 00:10:50,789
No solo hay left y top, también habría una propiedad bottom, ¿vale?

74
00:10:50,789 --> 00:10:52,950
Podremos jugar con diferentes

75
00:10:52,950 --> 00:10:55,730
Referencias para posicionar

76
00:10:55,730 --> 00:10:56,250
Los elementos

77
00:10:56,250 --> 00:11:01,519
Pues ya está

78
00:11:01,519 --> 00:11:03,779
Esto en cuanto al posicionamiento

79
00:11:03,779 --> 00:11:04,220
De elementos

80
00:11:04,220 --> 00:11:06,519
Seguimos con más vídeos