YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← Posicionamento em CSS

Get Embed Code
7 Languages

Showing Revision 10 created 03/09/2015 by Carlos Augusto.

  1. Agora vamos aprender como usar CSS

  2. para realmente mover as coisas.
  3. Não apenas colocá-las
    próximas uma da outra,
  4. mas para realmente colocá-las
  5. uma sobre a outra.
  6. Aqui, temos uma página
  7. com alguns cabeçalhos, imagens e alguns
  8. parágrafos embaixo.
  9. E atualmente está alinhada
  10. com o posicionamento padrão
  11. que o navegador usa,
  12. que chamamos de posicionamento
    estático ou normal.
  13. Isso significa que elementos
    alinhados em linha,
  14. como imagens,
  15. são dispostos da esquerda
    para a direita
  16. e elementos de bloco,
  17. como cabeçalhos e parágrafos,
  18. são dispostos de cima para baixo.
  19. Podemos mudar esse
    posicionamento padrão
  20. usando a propriedade
    "position" do CSS.
  21. Vamos testar isso com
    a imagem da paisagem.
  22. Vamos digitar "position", dois pontos e
  23. "relative" para o valor.
  24. O uso do posicionamento "relative"
  25. significa que as posicionará
    como normalmente faria,
  26. mas dá uma deslocada
    em alguma quantidade.
  27. Agora, para dizer ao
    navegador a quantidade
  28. que queremos deslocar,
  29. precisamos usar
    algumas combinações
  30. de quatro novas propriedades de CSS:
  31. "Top", "bottom", "left" e "right".
  32. Digamos que queremos
    que ela tenha
  33. vinte pixels pra baixo.
  34. Digite: "top: 20px"
  35. e mais 10 pixels
    pela esquerda,
  36. digamos: "left:10px".
  37. Está meio bancana,
  38. mas não muito.
  39. Eu quero te mostrar
    algo bem mais legal,
  40. o posicionamento absoluto.
  41. Podemos usá-lo para
    deixar um elemento
  42. completamente fora
    do fluxo normal
  43. e colocá-lo em qualquer lugar da tela.
  44. Para fazer isso,
  45. vou mudar de "relative"
  46. para "absolute"
  47. na imagem da paisagem
  48. e manter as propriedades
    "top" e "left".
  49. E você pode ver
  50. que a paisagem agora está
  51. ocultando nossas imagens e a dança.
  52. Agora, vamos arrumar isso.
  53. Vamos começar pelo Winston.
  54. Vamos adicionar uma regra para o Winston
  55. e atribuir-lhe o posicionamento "absolute"
  56. e deixe-me colocar
  57. "top" quarenta pixels.
  58. Bem, melhor "top" cinquenta pixels
  59. e cinquenta pixels para "left".
  60. Ok, parece bom.
  61. Hopper está ansioso para
    ficar no topo também.
  62. Vamos dizer que Hopper
    também precisa
  63. de posicionamento "absolute"
  64. e vamos deixar "top" com trinta pixels
  65. e "left" com sessenta pixels.
  66. Ok, meu objetivo é
  67. fazer parecer que Hopper
  68. esteja dançando em frente a Winston.
  69. Mas agora não parece assim
  70. porque Winston está sendo desenhado
  71. sobre Hopper.
  72. Para arrumar isso,
  73. eu poderia mudar a ordem das
  74. tags das imagens
  75. no HTML,
  76. mas uma maneira melhor é
  77. usar a propriedade "z-index" do CSS.
  78. Podemos usá-la para
    dizer ao navegador
  79. exatamente em qual ordem
    desenhar os elementos,
  80. dando-lhes diferentes índices em z.
  81. Então vou começar pela paisagem
  82. e dar um "z-index" de um
  83. e Winston vai acima com dois.
  84. Hopper no topo com três
  85. Certo!
  86. Agora Hopper está dançando
    na frente do Winston.
  87. Mesmo que ele não goste disso,
  88. mas ele terá que
    lidar com isso.
  89. Mas agora ainda temos cabeçalhos
  90. e colunas que estão escondidas.
  91. Então vejamos, vamos tentar
  92. e talvez eu queira que
  93. a dança esteja acima de tudo,
  94. então também vou dar-lhe
  95. um posicionamento "absolute"
  96. e um "z-index" de quatro.
  97. Ok, parece bom.
  98. Talvez "left" 10 pixels.
  99. Apenas mova um pouco
  100. Talvez, um pouco mais
  101. Tudo bem, parece bom
  102. Agora, para letra da música,
  103. quero apenas que ela
  104. apareça abaixo de tudo.
  105. Para isso, estou pensando
  106. usar a posição "relative" e então
  107. podemos usar o "top"
  108. que vocês sabem,
  109. igualaria a altura da imagem.
  110. Seria de duzentos e vinte pixels.
  111. Tudo bem, parece muito bom.
  112. Teremos uma festa bem doida rolando.
  113. Agora, se você para o vídeo
  114. e tentar rolar a página
  115. verá que tudo se move junto e
  116. o importante é que
  117. o posicionamento
    "absolute" é relativo
  118. ao topo da página.
  119. Conforme você rola a
    página para baixo
  120. quem tinha 10 pixels em "Top",
  121. vai sumir da tela,
  122. porque você está se distanciando
  123. do topo da página
  124. Outra opção é
  125. usar o posicionamento "fixed".
  126. Isso fará com que pareça que
  127. as coisas não se movem de jeito nenhum
  128. e se você quiser tentar isso,
  129. podemos mudar apenas
  130. H1 de "absolute" to "fixed",
  131. parar e tentar rolar a página
  132. Você verá que
  133. a dança fica no mesmo lugar
  134. Porque agora ela está na verdade
  135. relativa ao topo da tela, da janela.
  136. Ok, conseguimos usar
  137. três diferentes propriedades
    de poscionamento
  138. para fazer umas coisas bem legais
  139. Quando deveríamos
  140. usar o posicionamento
    "absolute" ou "fixed"?
  141. Bem, você pode usá-los
  142. para fazer um jogo,
  143. como eu fiz aqui
  144. Porque você vai querer usar todas
  145. as partes da cena no navegador
  146. Mas você também pode usá-las
  147. para páginas normais,
  148. como na Khan Academy.
  149. Usamos posicionamento
    "absolute" para modelos
  150. que pulam no meio da página
  151. e usamos posicionamento "fixed"
  152. para a caixa de busca
    na seção de equipe
  153. Para que esteja sempre visível
    quando você rolar a página.
  154. Você provavelmente não
    usará posicionamento
  155. em todas as páginas,
  156. mas quando usá-lo
  157. ficará feliz que isso existe.
  158. Legendado por [Valter Bigeli]
    Revisado por [Carlos A. N. C. R.]