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

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

Nesting a Relative Element in an Absolute Element

The power of CSS layout comes from its capability to position content precisely in the window. When an absolutely positioned element is nested in a relatively positioned element, the former uses its parent's top-left corner as its origin. Similarly, when a relatively placed element is placed inside an absolutely placed element (Code 8.6), it moves with the absolute element (Figure 8.10).

Code 8.6. Two classes are created, one defined as being absolutely positioned and the other defined as relatively positioned. The relative class is then used with a <p> tag and is nested within a <div> tag defined with the absolute class. This allows all the content for this page to be moved over to the right. Notice the string of <br> tags at the end of the code outside the absolute element. This string is used to overcome a bug in Internet Explorer that would prevent the scroll bars from appearing.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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