| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html lang="en"> |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| <title>Positioned Content inside Overflow</title> |
| <style type='text/css'> |
| body { background:#ccc; margin:2em } |
| p { margin-top:0 } |
| .content { width:30em; margin:2em auto; background:white; border:1px solid #999; padding:1em; height:7em; overflow:auto } |
| .child { background:red; opacity:0.5; position:absolute; padding:0.5em; top:0; left:0 } |
| |
| #content2 { position:relative } |
| p.ancillary { color:#999; font-style:italic; font-size:80% } |
| </style> |
| </head> |
| <body> |
| <div id="content1" class="content"> |
| <p class="child">hi 1</p> |
| <p>This page is to test the behavior of <code>position:absolute</code> content which is a child of an overflowed parent object with <code>overflow:auto</code>, both when the parent element is <code>position:static</code> (top case) and <code>position:relative</code> (bottom case).</p> |
| <p class="ancillary">Following extra content exists to ensure that the parent box overflows properly. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> |
| </div> |
| |
| <div id="content2" class="content"> |
| <p class="child">hi 2</p> |
| <p>Safari v1.2.2 incorrectly scrolls the 'hi 1' div when its parent is scrolled. If you resize the page even a little, this bug fixes itself.</p> |
| <p>Safari v1.2.2 also (really odd) causes the entire second div to be <code>opacity:0.5</code>, despite the fact that this property is only applied to the child item. This problem fixes itself if you resize the window and then scroll the div.</p> |
| <p class="ancillary">Following extra content exists to ensure that the parent box overflows properly. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> |
| </div> |
| </body> |
| </html> |
