pretty block. What can we do with it? In this paragraph it is just positioned regularly, i.e. inline in the text.Here is my pretty block. What can we do with it? In this paragraph it is just positioned regularly, i.e. inline in the text.
Here is my pretty block again. In this paragraph it is positioned 5 pixels from the top and 5 pixels from the left. Compare it to the paragraph above. See how it is a little lower and a bit more toward the right?
Here is my pretty block again. In this paragraph it is positioned 15 pixels from the top and 15 pixels from the left. Is it overlapping the text yet?
Let's see how relative positioning can work with text:
We can shift words down, like this.
We can shift words up, like this.
We can even shift right and left too.
With relative positioning of CSS-P
(Cascading Style Sheets Positioning),
we can create a cascade of pretty blocks!
Or, we can overlap the images.
Further, with z-index, we can specify the order of the overlapping.
It took me numerous tries to figure out how many pixels from the top to use in absolute-positioning this block. And, I'll bet it probably looks "right" only on my screen!
It might make more sense to use absolute positioning in relation to a relatively-positioned element, such as this paragraph. In this situation, the upper left corner of the element (rather than of the browser window) becomes coordinate 0,0.
Why is there a gap before the last line of text in the preceding paragraph?
Let's see how much text can fit within a 100 pixel by 100 pixel box.
Let's see how much text can fit within a 100 pixel by 100 pixel box.