Positioning Elements Using Styles

The most flexible way to position an element in a page is to use CSS rules. There are a number of possibilities available to a designer: the position property gives the most control over where an element will appear, allowing exact locations to be specified. Combined with the z-index property for controlling overlap, this allows for complex page layouts to be designed. For elements which need to appear within the flow of page's text, such as images, the float property will be more appropriate. This allows the text to wrap around the image.

All of these options are discussed in the sections below.

Float

Float & ClearIf you wish to position an element to the left or right within a page and have the remaining content of the page flow around it, as is typical with image positioning in a narrative page, then you need to understand how the float attribute is used.

Clear

ClearOccasionally, when floating an element (as described above), a problem can occur with the positioning of subsequent page elements. This is solved by using the clear attribute on the problematic element.

Various Positions

NextThe main thing that you need to understand for more complex positioning problems on a page is the correct use of the position attribute. This gives you complete control over where on a page an element is positioned.

Z Order

NextWhen elements can be positioned anywhere, it's always possible that they may overlap. Which elements appear on top relative to the other elements is controlled using the z-index attribute.

References