CSS Positioning Elements

There are two ways that you can position the elements on your page - either with relative positioning or absolute positioning. Relative positioning is moving an element with respect to its original location and absolute positioning is moving an element with respect to another element on your page.

Relative positioning: div#identifiername { position:relative; location: Xem; }. Where location can be either, top, bottom, right, or left. X will be a value of how far you want to move your element from its original location. Be sure to type all the colons and simicolon correctly. Also, instead of using the units of em, you could use a percentage.

Absolute positioning: div#identifiername {position:absolute;location: Xem; }. The value of location can either be top, bottom, right, or left, and X will be a value of how far you want to move your element with respect to the nearest element. You can define what the nearest element should be by typing in, TheNameOfYourNearestElement {position:relative;}.


CSS Overlapping Elements

Sometimes when you position your elements, you might notice that some of them overlap each other and this could cause problems who are trying to click on a link only to find that it doesn't work since its overlap by an element with a transparent color. To fix this, you define which element should be on top.

You use the code:

NameOfElement {z-index: X}, where X is a number that indicates the order that you want your element to appear. So if you wanted a particular element to be on top, then X would take the value of 1.

Next: CSS Margin And Padding Elements