CSS rules give you the ability to place HTML elements exactly where you want them. You can adjust how they respond to other elements sitting around them, or even hide them entirely. Here's a breakdown on the CSS placement properties.

Display: This property defines how an element is displayed. Setting display to "none" hides the element completely, while other values can change how an element reacts to other properties and elements. For example, divs are set to display as "block" by default, meaning it acts as a rectangular object, but you can use "display: inline" to force a div to act like a paragraph instead. Or, you can do the opposite and use "display: block" to force a paragraph to act like a div.

Position: Defines how an element reacts to the elements around it. Elements use "position: static" by default, meaning they display in order as they appear in the HTML code. "Position: relative" means that the element's static location is calculated, and then offset by whatever you indicate in the "top" and "left" properties. The other page elements act as though the relative element was still in its static location. "Position: absolute" elements ignore their static location, basing their position solely on the values in the top, left, right and bottom properties. In addition, other elements will ignore that element (so if you're not careful you can end up with some messy overlaps). "Position: fixed" is similar to "position: absolute" except that the element will hold its place even if your visitor scrolls the page.

Visibility: Decides if an element shows on the page or not. The difference between "display: none" and "visibility: hidden" is that in the former case, the other page elements behave as if the invisible object does not exist; in the latter, other elements will hold a place for the hidden element. Obviously, the default setting is "visible."

Float: Sets whether an element cascades to the left or right of other elements (or doesn't cascade at all, which is the default). This property is extremely helpful in getting relative elements positioned correctly. You must set a width for any floating element or it won't display correctly. Also, if you use float for one element you'll probably want to set the property for all the elements around it as well.

Clear: This property works in conjunction with the "float" property. It decides how the element will let other elements float around it – "clear: left" means that no other elements can float to its left; "clear: right" blocks off the right side and "clear: both" means no elements can float to either side. Default setting is "clear: none" (meaning other elements can float to either side).