Integrated Web Design: Position This! CSS Positioning Demystifie. Looking for the right position? Look no further. In this installment of Integrated Web Design, Molly Holzschlag teaches you all about positioning schemes. This article examines the four true positioning schemes in CSS, clarifies the confusion between absolute and relative positioning, and explains that although floats are often great for use in layouts, they should not be confused as an actual part of CSS positioning. CSS positioning is far easier to understand than it first seems to be. Fret no more! The best way to gain an understanding of positioning is to begin with the concept of normal flow, which is the default behavior of a web browser. Consider the XHTML document in Listing 1. Listing 1 A sample XHTML document. <! I add a simple style rule just to outline the block elements for you: You can then see the boxes generated by each paragraph (Figure 1).
Figure 1 This figure allows you to visualize my simple document as a series of blocks. Figure 2. Using a Background Image Grid to Lay Out Your Web Site. 4Google + I recently came across Khoi Vinh's post about using a background image of a grid to help you lay out your page as you are building it [via Garrett Dimon]. Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout. This seems like such a useful technique, especially when it comes to resolving cross-browser differences, that I'm surprised I haven't seen it referenced before (maybe I just don't move in the right circles).
As Khoi says himself: …coming up with this little trick left me very pleased with myself, as it allowed me to produce easily the most precise layouts of my career. I thought it might be useful expand upon this idea and create a generic grid template that one could use with any layout, and so I came up with the example below: Or, you can add them yourself – I've included the Fireworks source file for you to customize as you see fit. 20 pro tips - .net magazine. Learn CSS Positioning in Ten Steps: position static relative abs. 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1.
Footnotes 10.