Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 193

Save the fi le and preview it in your browser. Your splash div and the enclosed heading

have now been pushed down 35 pixels from the top-left corner of the maincontent div.

The advantage of this technique is that your text is not a graphic, so it will be readable
by search engines and by users browsing with images turned off. Also, the image and the
text are independent from each other, which makes them easy to modify. For example,
the text may be resized a bit smaller to avoid the crowding eff ect.

Positioning models in CSS

In addition to absolute and relative positioning, there is a property called fi xed positioning,

that is used less frequently than the other two. Here is a brief description of each of the

properties:

Absolute positioning: An element that is set to absolute strictly follows the positioning

values given to it, relative only to its containing element. The containing element can be another

div or the actual page. Absolutely positioned elements are pulled out of the normal fl ow of

HTML content, and regardless of the elements that surround them (such as, text content or

neighboring divs), they always appear at the exact coordinates assigned to them.

Relative positioning: A relatively positioned element accepts values for position properties

such as top and left, but it also takes the normal fl ow of neighboring HTML content into

account. For example, a value of left:35 would add 35 pixels to the element’s left position.

Fixed positioning: This property generates an absolutely positioned element that is positioned

relative to the browser window. In other words, by fi xed positioning an element, you are anchoring

it to your browser window. This eff ect is used for elements such as footers or menus that you want

to stay in the same position in the browser window (even when the user scrolls down).