I'm designing a site that has a header that uses fixed positioning,
with a big z-index, so that when the document scrolls, the header stays
in place, while the content disappears underneath it. Like a frame.
However, links that point to anchors in the content are hiding the
content behind the header, and I don't know how to fix that. I've set
up an example here:
There's a header div, a content div and a sidebar div. The header and
sidebar use fixed positioning, and the content uses absolute
positioning. The header has a background that is the same as the body
and a big z-index, so when the content scrolls up, it is hidden. There
are four "entry" divs in the content, each of which has a heading (with
an id defined) and a couple paragraphs of garbage text. There is one
"links" div in the sidebar, which has a four-item list of links, each
of which point to one of the headings in the content: when you click on
one, the text you want to see is hidden behind the header div. You
might have to shrink the window to see the problem.
I was hoping there was some sort of scrolling property that I could
set, so that I could set where the top of the viewable area was – or
something like that – but I can't find one.
Thanks for any ideas,
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/