Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we could use relative positioning to move it a bit to the right and down a couple of pixels. Below is an example.
You probably noticed that you define the four possible directions (left, right, up, and down)
using only two (left and top). Here's a quick reference when moving HTML elements in CSS.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for left.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for top.
Remember, relative positioning moves stuff from where it would normally be. So if you had a paragraph in the middle of a page and you made both the top and left values negative 50, then the paragraph would move up and to the left 50 pixels from its normal location.
With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the parent element (that's the HTML element that it is inside of), so be sure you are measuring from that point. For example, if you had a bold tag inside of a paragraph tag, the parent of the bold tag would be the paragraph
Since the paragraph tag is our parent element, we need to decide where want our bold tag to appear in regards to the top left of the paragraph. Let's have it appear 10 pixels down and 30 pixels to the right.
Specifying a direction with absolute positioning works the same as with relative positioning.
Found Something Wrong in this Lesson?
Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!
Try it out!