YouTube

Got a YouTube account?

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

English subtitles

← CSS positioning

Get Embed Code
7 Languages

Showing Revision 1 created 11/28/2014 by 199coopere.

  1. Now we'll learn how to use CSS

  2. To really move things around.
  3. Not just put them next to each other.
  4. But to actually put things
  5. On top of each other.
  6. Here, we have a webpage
  7. With a few headers, and images, and some
  8. Paragraphs down here
  9. And its currently all laid out with
  10. The default positioning strategy
  11. Which the browser uses
  12. Which we call static or normal positioning
  13. It just means that in line elements
  14. Like images
  15. Are laid from left to right
  16. And block elements
  17. Like headers and paragraphs
  18. Are laid out from top to bottom
  19. We can change that positioning strategy
  20. Using the CSS position property
  21. Let's try it on the landscape image
  22. We'll type position, colon, and then
  23. Relative for the value
  24. The relative position strategy
  25. Means position it how you normally would
  26. But then offset it by some amount
  27. Now, to tell the browser what amount
  28. We want to offset by
  29. We need to use some combination
  30. Of four new CSS properties
  31. Top, bottom, and left, and right
  32. Like let's say we wanna have it be
  33. Twenty pixels down
  34. Say top twenty pixs
  35. And ten pixels over
  36. We'll say left ten pixs
  37. So that's kind of neat,
  38. But not really that neat
  39. I wanna show you something waaay cooler
  40. Absolute positioning
  41. We can use it to take an element
  42. Completely out of the normal flow
  43. And put it anywhere on the screen
  44. To do that
  45. I will change relative
  46. To absolute
  47. On the landscape
  48. And keep the top left
  49. And you can see
  50. That landscape is now
  51. Hiding our images and dance party heading
  52. And now we're going to fix that
  53. Let's start with Winston
  54. So we'll add a rule for Winston
  55. And give Winston a position absolute
  56. And then let me say
  57. Top forty pixs
  58. Oh, let's say top fifty pixs
  59. And then left fifty pixs
  60. Ok, that looks good
  61. And hopper is really eager to get on top
  62. As well
  63. So let's say Hopper also needs
  64. A position absolute
  65. And let's say top thirty pixs
  66. And left sixty pixs
  67. Ok, so my goal is
  68. To make it look like Hopper
  69. Is kind of dancing in front of Winston
  70. But right now it doesn't look that way
  71. Because Winston is being drawn
  72. On top of Hopper
  73. To fix this,
  74. I could either change the order of
  75. The actual image tags
  76. In the html
  77. But a kind of better way is
  78. To use the CSS z index property
  79. We can use that to tell the browser
  80. Exactly what order to draw
  81. Elements in
  82. By giving them differency
  83. Indexes
  84. So I'll start with a landscape
  85. And give it a z index of one
  86. And Winston goes on top with two
  87. Hopper goes on top with three
  88. Alright!
  89. Now Hopper is dancing in front of Winston
  90. Even if he doesn't like that
  91. But he'll have to deal
  92. But now we still have headings
  93. And columns that are hidden
  94. So let's see, let's try
  95. And get the, maybe I want the
  96. Dance party to be on top of everything
  97. So I'm also gonna give that
  98. Position absolute
  99. And z index four
  100. Ok, looks good
  101. Maybe left ten pixs
  102. Just move it over
  103. Maybe, maybe a bit more
  104. Alright, that looks good
  105. Now, for the song lyrics
  106. I actually just want them to
  107. display underneath everything
  108. So for those I'm thinking
  109. Position relative and then
  110. We could just do a top
  111. Which is you know,
  112. Would equal the height of the image
  113. It would be two hundred twenty pixels
  114. Alright, so that is looking really good
  115. We've got a crazy dance party
  116. Going on now
  117. Now, if you pause a talkthrough
  118. And try scrolling the page
  119. You'll see that everything
  120. Scrolls together
  121. And the important thing is
  122. That absolute positioning is relative
  123. To the top of the webpage
  124. So, as you scroll down the webpage
  125. Things that were ten pixels
  126. Top, are going to be moving off screen
  127. Because you are going farther away from
  128. The top of the webpage
  129. Another option is
  130. Fixed positioning
  131. Which will actually make it seem like
  132. Things don't move at all
  133. And, if you want to try that out
  134. We can just change
  135. h1 from absolute to fixed
  136. And now, pause and try scrolling
  137. And you will see that
  138. Dance party just stays in the same place
  139. Because now, it is actaully
  140. Relative to the top of the screen
  141. The window
  142. Ok, so we've managed to use
  143. Three different position properties
  144. To do some pretty cool stuff
  145. When would we
  146. Actually use absolute or fixed positioning
  147. Well, you could use them
  148. To make a game,
  149. Like I did here
  150. Because you'll want to layout all
  151. The parts of the scene in the browser
  152. But you can also use them
  153. For normal webpages
  154. Like on Khan Academy
  155. We use absolute positioning for the models
  156. That pop up in the middle of the page
  157. And use fixed positioning
  158. For the search box on out team page
  159. So that it is always visible as you scroll
  160. You probably won't use positioning
  161. In every webpage
  162. But when you do use it
  163. You'll be really happy that it exists