LAYOUTS - CSS: Professional Techniques for Modern Layout - page 150

Figure 4-46: Flipping the placement of the positioned elements.

Of course, you do have to be concerned about overlap. As an example, suppose the navigation
links run to two or three lines of text. h ey might start overlapping the search box. h is is why
a lot of layout uses l oats instead of positioning; l oats don't naturally overlap. Still, used
judiciously, positioning can make it a lot easier to rearrange content within an area like a
header or footer.

PUSHING OUT OF THE CONTAINING BLOCK
An interesting feature of absolute positioning is that you can position elements outside the
element that serves as the containing block (positioning context). h is can come in a lot
handier than you might think.

For example, you can take navigation links that are structurally within a header div and
visually place them just below that div . Consider the following markup structure (see the
preceding section for the full details):

152

< div class ="header">
< a href ="/">< img src ="logo.png" alt ="ConHugeCo Inc. " >< /a >
< ul class ="nav"> ... </ ul >
< form method ="get" action ="/search"> ... </ form >
</ div >

In addition, apply (on top of some other color, font, and related styles which are omitted here
for clarity) the following styles to place the navigation and search form (see Figure 4-47):

.header { position : relative ; margin-bottom : 1.5em ;}
.nav { position : absolute ; top : 100% ; right : 0 ;}
.header form { position : absolute ; top : 0 ; right : 0 ;}

Notice that the links are now sitting just below the bottom edge of the header div . In order to
leave room for the links to have enough space to avoid overlap with content at er the header, a
bottom margin is applied to the header. h is makes it a lot less likely that the search box (still
within the header) and the navigation links will overlap.