Bookmark and Share

CSS Position

With the knowledge of CSS Positioning you will be able to manipulate the exact position of your HTML elements. Designs that previously required the use of JavaScript or HTML image maps may now be done entirely in CSS. Not only is it easier to code, but it also loads much quicker!

Advertise on Tizag.com

Position Relative

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.

CSS Code:

h3 { 
	 position: relative; 
	top: 15px;
	left: 150px;
}
p { 
	 position: relative; 
	left: -10px;
}

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.

Display:

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.

Position Absolute

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.

CSS Code:

b{ 
	position: absolute; 
	top: 10px;
	left: 30px;
}

Display:

Specifying a direction with absolute positioning works the same as with relative positioning.

Bookmark and Share




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!


Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials