The problem is this: I have a nested absolute position div inside a fixed position div. I want this sidebar to be on the right of the window at all times, and the box on the bottom of the sidebar to stay at the bottom no matter what. It looks like it works, on first glance.
Unfortunately, when you scroll down, eventually the absolute box disappears. Just pops away, affecting nothing else on the page. What is more interesting to note, is that the point at which it disappears where the point that was on the bottom of the page when it loaded is scrolled to the top. Then, once you scroll past that point, the box disappears. Poof. Gone.
What's going on?
The w3 claims that an absolutely positioned element is positioned according to the limits of its containing box. I figured (although perfect support for positioning doesn't exist in any browser, as far as I know) that it should work just fine to have an absolute position element inside a fixed position one. I bet the w3 doesn't claim that if you scroll more than a page height down, the absolutely positioned element should disappear.
The css that causes the problem in the "fixed positioned div" is:
div#sidebar { position: fixed; top: 0; bottom: 0; }
For the "disappearing div", the code is:
div#disappearing { position: absolute; bottom: 0; }
Opera version:
Version 8.51
Build 7712
Platform Win32
System Windows XP
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam libero. Fusce ut lorem. Nunc ac nibh vitae nulla rutrum eleifend. Proin dapibus porttitor mauris. Praesent tempus purus non pede. Curabitur et sem. Nulla facilisi. Mauris orci purus, malesuada ut, bibendum eu, dapibus a, dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam elementum, urna sed consectetuer tristique, nulla libero eleifend orci, eget vulputate orci nunc a massa. Vivamus a justo ut purus auctor sollicitudin. Curabitur eget elit eget enim pulvinar pretium. Cras at nunc ut magna egestas sollicitudin.
Phasellus mattis ante quis nulla. Vestibulum vitae turpis. Curabitur porta. Donec mauris. Fusce volutpat neque ultricies erat. Nam condimentum, ipsum non mollis luctus, magna magna pellentesque odio, sit amet aliquet eros purus a nibh. Vivamus congue ipsum. Etiam sagittis, dui sit amet rhoncus scelerisque, ipsum enim viverra orci, eget scelerisque mi libero non massa. Cras ac purus sit amet metus iaculis euismod. Sed urna. Donec id arcu. Suspendisse elit metus, luctus eget, blandit nec, sagittis sit amet, nulla. Integer iaculis hendrerit tellus. Nulla a nunc. Maecenas sollicitudin, nunc sed condimentum laoreet, sapien nulla euismod pede, quis tristique urna dui eget tellus. Nunc eget velit. Phasellus et lorem.
Vestibulum hendrerit, ligula eget euismod posuere, augue nisi euismod turpis, eleifend iaculis sapien leo sit amet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Vestibulum scelerisque venenatis libero. Nam ullamcorper felis at est. Nullam lacus mauris, gravida at, sagittis nec, porttitor ac, diam. Sed vestibulum, mi eget tristique adipiscing, ipsum nulla blandit urna, quis rhoncus nisl arcu at sem. Maecenas dapibus. Vestibulum orci lacus, porta eu, ultricies vitae, varius quis, augue. Nullam in elit et sapien convallis suscipit.
Integer vel ligula vulputate magna gravida accumsan. Etiam sapien dui, tincidunt pulvinar, fringilla nec, interdum a, sem. Vestibulum arcu pede, feugiat eu, blandit nec, adipiscing id, augue. Donec sagittis tellus et elit. Morbi ultrices dui non nibh. Nullam non felis. Phasellus molestie tempus ligula. Etiam est neque, rutrum a, mollis a, posuere vel, leo. In hac habitasse platea dictumst. Pellentesque feugiat.
In ipsum. Donec ornare, lacus vel porttitor ullamcorper, ante sapien mattis velit, et viverra leo ligula quis nunc. Nunc luctus, ligula vel congue imperdiet, purus erat tristique libero, suscipit varius sapien felis ut mauris. Fusce dictum, ligula et vestibulum ullamcorper, neque nisl vulputate tortor, eu ultrices nulla nulla vitae augue. Aenean placerat, erat tincidunt suscipit molestie, velit urna tincidunt sem, eget tempor leo massa nec libero. Integer ornare odio ultrices lectus. Pellentesque arcu neque, interdum at, mollis quis, tincidunt ut, leo. Donec varius eros eget lacus. Nunc adipiscing ante sed est. Integer quis quam. Integer blandit, ligula ac consequat egestas, elit nulla dapibus dolor, at porta nibh leo nec eros. Sed dignissim accumsan magna. Nulla iaculis. Phasellus consectetuer enim. Nulla pharetra imperdiet tellus. Vivamus pharetra.
Aliquam est tellus, tempor nec, semper vel, malesuada id, nunc. Nullam in ipsum placerat urna facilisis ornare. Aenean venenatis sollicitudin ante. Nam fringilla urna sit amet urna. Quisque dignissim nibh nec lectus. Mauris tincidunt, felis eget convallis dignissim, libero mi blandit mauris, ut vehicula diam dui sit amet eros. Cras massa. Maecenas rutrum. Sed felis metus, volutpat non, sollicitudin eu, suscipit fermentum, eros. Cras consectetuer. Etiam a risus et ante gravida viverra. In accumsan, ligula sit amet aliquam congue, magna nulla hendrerit dolor, porta auctor magna justo non tellus. Etiam molestie massa id pede. Sed vehicula leo at erat. Sed nec neque. Phasellus ac nisi. Praesent vitae neque.
Nullam nec neque. Curabitur vitae risus eget metus placerat iaculis. Sed eu tellus eget dolor vestibulum ultrices. In hac habitasse platea dictumst. Phasellus consectetuer. Cras in risus. Nunc lobortis, sapien eget feugiat placerat, neque leo consectetuer nisl, non dapibus leo diam sagittis eros. Mauris enim. Praesent luctus. Praesent non nisi. Mauris mauris erat, lacinia a, placerat id, malesuada ut, odio. Cras consectetuer. Donec a urna eget eros tempor mattis.
Morbi sodales. Morbi et risus non neque lobortis condimentum. Fusce mattis, nibh eu cursus fermentum, eros neque aliquet nibh, at ultricies nisi justo id pede. Nam pharetra lacus feugiat orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras ac lacus a metus adipiscing adipiscing. Morbi quis felis. Cras consectetuer libero in justo. In felis. Donec ac dolor. Sed vulputate urna a est. Aenean blandit bibendum turpis. Suspendisse eget orci. Duis dolor. Cras placerat odio in purus.