#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.