Lesson 3: Working with CSS properties CHAPTER 4 183
Now that div2 is non-static, what would happen if the position of one of its child elements
were set to absolute? For example, suppose div5 has the following style rule.
#div5 {
background-color: lightblue;
position: absolute;
top: 5px;
left: 5px;
}If div5 had no non-static parent elements, div5 would be positioned in the top-left corner
of the browser window. Because div5 has div2 as a non-static parent, div5 will be positioned
in the top-left corner of div2. The result is shown in Figure 4-15.FIGURE 4-15 he use of absolute positioning within a non-static elementTNotice that div5 is positioned relative to div2, not relative to the browser window. One
of the benefits of this approach is that you can easily set up div3, div4, and div5 as columns
within div2 by setting the top, left, right, and width properties for div3, div4, and div5, respec-
tively. Before demonstrating this, what would you do if you wanted div5’s position to be rela-
tive to the browser window? You can use fixed positioning instead of absolute positioning.Using the fixed position
The element position is calculated much like it is with absolute positioning, but this is always
in relation to the browser window.
From the previous example, the style rule for div5 is changed to the following.
#div5 {
background-color: lightblue;
position: fixed;
top: 5px;