Welcome to the funhouse! Let's position stuff.
position
The position property is your key to a happier life. Witness:
H4 { position: absolute; left: 100px; top: 43px }
This stylesheets rule tells the Web browser to position the beginning of the <H4> box of text exactly 100 pixels from the left edge of the browser window, and exactly 43 pixels down from the top edge. See the code in action.Note that the only things specified are the left and top edges. That means that the text will flow normally all the way to the right side of the browser window, and will flow normally down the page.
The left and top properties are very straightforward: left defines the amount of space between the element and the left edge of the browser window, and top defines the space between the element and the top of the window.
For defining these distances, you can use length units or percentage values. Length units are the same ones we've talked about previously: pixels, points, ems, inches, and so on. If you use percentage values, the percentage refers to the size of the parent element.
What can you position? Everything. Paragraphs, specific words, GIFs and JPEGs, QuickTime movies, and so on. Things can be positioned all over the place, as this example shows.
What we've been talking about so far is absolute positioning. Hence the position: absolute part of the CSS rule. When an element is positioned absolutely, it's positioned independent of any other object on the page, as we've already noted. It's as if that element doesn't "know" anything about what else is on the page. The positioned element does inherit other properties, however — font, size, and so on.
Is there an alternative to absolute positioning? Yes: relative positioning.
next page»
