• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8. Positioning Controls > Nesting an Absolute Element in a Relative Ele...

Nesting an Absolute Element in a Relative Element

You have seen how an element can be positioned in the window in an exact (absolute) spot. An absolutely positioned element can also be nested within another element that has relative positioning (Code 8.5). When you do this, the absolute element flows from an origin at the top-left corner of the relative element rather than the window (Figure 8.9).

Code 8.5. Two classes are created, one to be positioned relatively and the other absolutely. Then the absolute class is used in a <div> tag that is nested within a <div> tag that uses the relative class. This sets the absolute element to appear in the background of the relative element, and it will move around as the relative element's position is set. The z-index of the <p> tag is also being set to force text to appear above the absolutely positioned element.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint