YouTube

Got a YouTube account?

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

Polish subtitles

← CSS positioning

{'type': u'plain'}

Get Embed Code
7 Languages

Showing Revision 1 created 02/26/2015 by Lech Mankiewicz.

  1. Nauczymy się, jak używać CSS

  2. do przemieszczania elementów.
  3. Nie tylko do szeregowania.
  4. Będziemy nakładać
  5. jedne na drugie.
  6. Tu mamy stronę
  7. z paroma nagłówkami, obrazkami
  8. i akapitami.
  9. Na razie są ułożone
  10. wg pozycjonowania domyślnego,
  11. którego używa przeglądarka.
  12. To tzw. pozycjonowanie
    statyczne lub normalne.
  13. Elementy śródliniowe,
  14. np. obrazy,
  15. są ustawione od lewej do prawej,
  16. A elementy blokowe,
  17. np. nagłówki i akapity,
  18. są ułożone pionowo.
  19. Możemy zmienić ten układ,
  20. korzystając z własności CSS
    „position” (pozycja).
  21. Wypróbujmy to przy zdjęciu.
  22. Piszemy „position:”,
  23. a potem wartość względną.
  24. W metodzie pozycji względnej
  25. rozmieszczacie elementy normalnie,
  26. a potem przesuwacie o jakąś wartość.
  27. Żeby zawiadomić przeglądarkę
  28. o tej wartości,
  29. użyjemy jakiejś kombinacji
  30. czterech nowych właściwości CSS:
  31. góra, dół, lewo, prawo.
  32. Powiedzmy, że chcemy mieć
    nasz element
  33. 20 pikseli niżej.
  34. Napiszemy top: 20 pikseli.
  35. Przesuniemy 10 pikseli w bok.
  36. Piszemy: 10 pikseli w lewo.
  37. To jest fajne,
  38. ale nie aż tak.
  39. Pokażę wam coś znacznie lepszego:
  40. pozycjonowanie bezwzględne.
  41. Możemy wyciągnąć element
  42. z układu
  43. i umieścić go gdziekolwiek.
  44. W tym celu
  45. zmienię „relative” (względne)
  46. na „absolute” (bezwzględne)
  47. przy naszym krajobrazie.
  48. Górę i lewą stronę zachowam.
  49. Jak widzicie,
  50. krajobraz zasłania
  51. obrazek i nagłówek
    „Impreza taneczna”.
  52. Poprawmy to.
  53. Zacznijmy od Winstona.
  54. Dodamy regułę
  55. pozycjonowania bezwzględnego.
  56. Dajmy, powiedzmy,
  57. „góra: 40 pikseli”.
  58. Albo niech będzie 50.
  59. I lewa 50.
  60. Dobrze to wygląda.
  61. Hopper (Skacząca)
    chce być na wierzchu.
  62. Ona także.
  63. Jej też określimy
  64. pozycję bezwzględną.
  65. Powiedzmy, góra: 30 pikseli,
  66. a lewa: 60 pikseli.
  67. Niech to sprawia wrażenie,
  68. jakby Hopper
  69. tańczyła przed Winstonem.
  70. Na razie tak to nie wygląda,
  71. bo Winston znajduje się
  72. na wierzchu.
  73. Żeby to poprawić,
  74. mogłabym zmienić kolejność
  75. znaczników „image”
  76. w HTML-u,
  77. lepiej jednak będzie
  78. skorzystać z właściwości CSS
    „z-index”.
  79. Powiemy przeglądarce,
  80. w jakiej kolejności
  81. ustawiać elementy,
  82. nadając im
  83. z-indeksy.
  84. Zacznijmy od krajobrazu
  85. i nadajmy mu numer 1.
  86. Na to - Winston z dwójką,
  87. a na wierzch Hopper, trzecia.
  88. Dobrze!
  89. Teraz Hopper
    tańczy przed Winstonem,
  90. chociaż nie ma ochoty.
  91. Trudno, musi!
  92. Jednak niektóre nagłówki
  93. i kolumny są ukryte.
  94. Spróbujmy…
  95. chcę umieścić nagłówek
  96. „Impreza taneczna” na wierzchu.
  97. Określę więc dla niego
  98. pozycję bezwzględną
  99. i nadam mu numer 4.
  100. Dobrze.
  101. Może 10 pikseli w lewo.
  102. Przesunę.
  103. Może jeszcze trochę.
  104. Teraz dobrze.
  105. A tekst piosenki
  106. niech wyświetla się
  107. poniżej całej reszty.
  108. Dla tych elementów
  109. określę pozycję bezwzględną.
  110. Można określić tylko górę,
  111. która, jak wiecie,
  112. będzie równa wysokości obrazka.
  113. To 220 pikseli.
  114. Teraz wygląda to dobrze.
  115. Szalona impreza taneczna
  116. na całego!
  117. Zatrzymajcie teraz film
  118. i spróbujcie przewinąć w dół.
  119. Zobaczycie, że wszystko
  120. przewija się razem.
  121. Ważna sprawa:
  122. pozycjonowanie absolutne
  123. odnosi się do góry strony.
  124. Gdy więc przewijacie,
  125. to, co było 10 pikseli od góry,
  126. zniknie z ekranu,
  127. bo oddalacie się
  128. od góry strony.
  129. Inna możliwość
  130. to pozycjonowanie ustalone.
  131. Będzie wyglądało tak,
  132. jakby elementy się nie ruszały.
  133. Żeby to wypróbować,
  134. zmienimy
  135. „absolute” na „fixed”
    w nagłówku „h1”.
  136. Zatrzymajcie film
    i spróbujcie przewijać.
  137. Zobaczycie,
  138. że „Impreza taneczna”
    nie zmienia miejsca.
  139. Bo teraz jej pozycja
  140. odnosi się do góry ekranu,
  141. okna.
  142. No dobrze. Wykorzystaliśmy
  143. trzy właściwości pozycjonowania
  144. i zrobiliśmy fajne rzeczy.
  145. Kiedy używamy
  146. pozycjonowania bezwzlędnego
    lub ustalonego?
  147. Można je zastosować,
  148. robiąc grę,
  149. jak ja tutaj,
  150. żeby rozłożyć elementy
  151. scenki w przeglądarce.
  152. Można też stosować to
  153. do zwyczajnych stron,
  154. np. w Khan Academy.
  155. Pozycjonowanie bezwzględne
  156. stosujemy do modeli na środku,
  157. a pozycjonowanie ustalone
  158. do pola przeszukiwania.
  159. Zawsze będzie widoczne.
  160. Nie będziecie używać
    pozycjonowania
  161. na każdej stronie,
  162. ale jeśli już,
  163. to będziecie zadowoleni, że można.