#fixed1 {
position: fixed;
top: 80px;
left: 300px;
width: 150px; }
#fixed2 {
position: fixed;
top: 80px;
left: 500px;
width: 150px; }
#fixed3 {
position: fixed;
top: 80px;
left: 700px;
width: 150px; }
.overflowHidden {
overflow: hidden; }
.relative {
position: relative; }
.absolute {
position: absolute;
top: 0;
right: 0; }
div {
padding: 5px;
margin: 5px;
border: solid 1px #999; }
#veryLarge {
position: relative;
height:1000px;
width:1500px; }
When you scroll this page the following objects will be clipped:
- (relative objects and overflowHidden objects) inside (overflowHidden objects) inside (fixed objects) will be clipped;
- (relative objects and overflowHidden objects and absolute objects) inside (fixed/overflowHidden objects) will be clipped;
Nice effect, but not what we want. Tested in Safari Version 2.0.4 (419.3), and WebKit Nightly Build Mon Nov 20 5:18:23 GMT 2006.