YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish, Mexican subtitles

← Posicionamiento en CSS

Get Embed Code
7 Languages

Showing Revision 6 created 03/25/2016 by Martha Isabel Soriano Ruiz.

  1. Ahora vamos a aprender cómo usar CSS

  2. para mover realmente las cosas.
  3. No sólo poner unas junto a otras.
  4. Sino en realidad poner las cosas,
  5. encima de otras.
  6. Aquí tenemos una página web,
  7. con algunos encabezados, imágenes y
  8. algunos párrafos aquí abajo.
  9. Y en este momento todo está acomodado
  10. con la estrategia de posicionamiento por defecto,
  11. que usa el navegador
  12. y que llamamos posicionamiento normal o estático.
  13. Eso significa que los elementos en línea,
  14. como las imágenes,
  15. se ponen de izquierda a derecha.
  16. Y los elementos en bloque,
  17. como encabezados y párrafos,
  18. se acomodan de arriba a abajo.
  19. Podemos cambiar esa estrategia de posicionamiento,
  20. usando la propiedad "position" de CSS.
  21. Vamos a intentarlo con la imagen del paisaje.
  22. Tecleamos "position:" y luego
  23. ponemos el valor "relative".
  24. La estrategia de posición relativa,
  25. significa que lo pone donde lo haríamos normalmente
  26. pero compensando un poco.
  27. Ahora, para decirle al navegador, qué cantidad
  28. queremos compensar,
  29. necesitamos usar una combinación de
  30. cuatro nuevas propiedades de CSS:
  31. "Top" (arriba), "bottom" (abajo), "left" (izquierda) y "right" (derecha).
  32. Por ejemplo, queremos que la imagen esté
  33. veinte pixeles abajo.
  34. Escribimos "top: 20 px"
  35. Y aquí 10 pixeles,
  36. y aquí escribimos "left: 10px".
  37. Esto se ve muy ordenado,
  38. pero en realidad no está tan ordenado,
  39. Quiero mostrarles una manera mejor.
  40. Posicionamiento absoluto.
  41. Podemos usarlo para sacar un elemento
  42. completamente del flujo normal,
  43. y ponerlo en cualquier parte de la pantalla.
  44. Para hacer eso, voy a cambiar "relative" por "absolute"
  45. en el paisaje, y voy a dejar "top" y "left" como está.
  46. Y pueden ver que el paisaje ahora está
  47. ocultando nuestras imágenes y el encabezado que dice "Dance Party".
  48. Vamos a arreglar eso ahora,
  49. empezando por "Winston",
  50. así que vamos a añadir una regla para "Winston"
  51. para darle a "Winston" una posición absoluta.
  52. Y luego vamos a decir
  53. 40 pixeles.
  54. Oh, vamos a escribir arriba 40 pixeles,
  55. y luego izquierda 50 pixeles,
  56. Ok, eso se ve bien.
  57. Y "Hopper" está realmente ansioso por estar arriba también.
  58. Así que "Hopper" también necesita una posición absoluta.
  59. Y vamos a escribir "top: 30px",
  60. y "left: 60 px".
  61. Ok, mi objetivo es
  62. hacer que "Hopper" parezca que
  63. está bailando enfrente de "Winston".
  64. Pero en este momento no parece que lo esté haciendo,
  65. porque "Winston" se está dibujando
  66. encima de "Hopper".
  67. Para arreglar esto,
  68. podría cambiar el orden de
  69. las etiquetas de las imágenes en el HTML,
  70. pero una mejor manera de hacerlo es
  71. usar la propiedad "z index" de CSS.
  72. Podemos usar esta propiedad para decirle al navegador
  73. el orden exacto en que debe dibujar
  74. los elementos, al darles diferentes índices.
  75. Así que empezaré con el paisaje
  76. y voy a asignarle un "z index" de 1.
  77. Y sigue "Winston" con 2,
  78. y "Hopper" con 3.
  79. ¡Muy bien!
  80. Ahora "Hopper" está bailando enfrente de "Winston",
  81. aunque no le guste, pero lo tiene que hacer.
  82. Pero todavía tenemos encabezados
  83. y poemas que están ocultos.
  84. Así que tratemos de...
  85. tal vez quiero que "Dance party" quede por arriba de todo,
  86. así que voy a asignarle posición absoluta.
  87. Y "z index: 4".
  88. Ok, se ve bien, podríamos poner "left: 10px"
  89. y moverlo un poco, tal vez un poco más.
  90. Muy bien, se ve bien.
  91. Ahora para la letra de las canciones,
  92. en realidad quiero que se desplieguen debajo de todo.
  93. Así que para eso voy a cambiar
  94. la posición a "relative" y luego
  95. ponemos "top: ", que debe ser...
  96. tan alto como la imagen, podría ser 220 pixeles.
  97. Muy bien, en realidad esto se ve bien.
  98. Ya tenemos una loca fiesta de baile.
  99. Ahora, si pausas nuestra guía paso a paso,
  100. y tratas de desplazar la página
  101. verás que todo se desplaza al mismo tiempo.
  102. Y lo importante es
  103. que el posicionamiento absoluto es relativo
  104. a la parte superior de la página web.
  105. Así que si desplazas hacia abajo la página web,
  106. las cosas que están 10 pixeles abajo de
  107. la parte superior se van a salir de la pantalla,
  108. porque estás yendo más lejos
  109. de la parte superior de la página web.
  110. Otra opción es el posicionamiento fijo.
  111. Que en realidad hace que parezca que las cosas
  112. no se mueven.
  113. Y si quieres probar,
  114. sólo tenemos que cambiar
  115. "h1" de "absolute" a "fixed".
  116. Y ahora, haz una pausa y trata de desplazar la pantalla
  117. y verás que "Dance party" se queda en el mismo lugar,
  118. porque ahora, en realidad
  119. es relativo a la parte superior de la pantalla,
  120. de la ventana.
  121. Ok, hemos usado
  122. tres propiedades diferentes de posicionamiento
  123. para hacer cosas geniales.
  124. En realidad ¿cuándo debemos usar
  125. posicionamiento absoluto o fijo?
  126. Bueno, podríamos usarlos
  127. para hacer un juego,
  128. como yo lo hice aquí,
  129. porque querrías desplegar todas
  130. las partes de tu escena en el navegador.
  131. Pero también podrías usarlos
  132. en páginas web normales
  133. como Khan Academy.
  134. Usamos posicionamiento absoluto para los modelos
  135. que aparecen en el centro de la página.
  136. Y usamos posicionamiento fijo
  137. en el buscador de nuestra página
  138. para que siempre esté visible aunque desplaces la página.
  139. Probablemente no uses el posicionamiento
  140. en cada página web,
  141. pero cuando lo uses
  142. estarás muy feliz de que exista.