another point of inspiration and more notes

20 Examples of Black and White Color Usage in Web Design - DesignModo

Positioning in CSS is deceptively simple in concept. There are only a handful of relevant properties. Here is a review of the properties:

• position has five possible values: static, relative, absolute, fixed and inherit. Relative displaces the element relative to where it would have been in the normal flow of an uninterrupted HTML page. It works rather like an offset. Absolute allows you to place an element exactly where you want it. Absolute positioning disrupts the flow of the page and places an element exactly where you say regardless of the other elements on the page. It pulls the positioned element outside the flow of the page. The other elements on the page will continue to flow, ignoring the absolutely positioned content. Sometimes this can cause disturbing pile ups. Absolute positioning can take advantage of the z-index property to organize the elements in three dimensions. Using it you can create wonderful layered effects. Relative and absolute positioning are frequently used together. The relatively positioned element contains the absolutely positioned elements. We will be taking a closer look at this later on in our module.
• float allows elements to sit next to each other at the same height within a page. Left to their own devices, the natural behavior of block elements is to stack one on top of the other. Floats permit block level elements to sit next to each and still retain the properties of a block.
• clear interrupts the float and begins a new line. It is used in tandem with the float property.
• visibility has two values: visible and hidden. This property allows you to place an invisible element on a page and then use a JavaScript event to reveal the text on demand. There are a lot of interesting interfaces based on this concept.
• overflow tells the browser what to do if it has more content than an element can comfortably handle. It can be set to visible, which resizes the box; hidden, which hides the extra content; scroll, which inserts a scroll bar; and auto, which inserts a scroll bar only when needed. Combining the overflow property with the scroll set to auto is how modern iframes are implemented. To use the overflow property effectively, the dimensions of the element need to be defined.