complex DIV overlapping and visibility with CSS

Question

I'm looking to have an image object that looks like it's "pinned" to the side of my fixed-width page. but it seems to be contradictory - in order to style it, the div with the image has to be in a separate div than the main content, but in order for it to work in the layout, the div with the image can't be a separate div from the main content.

It's hard to explain in words, so take a look at this demo I whipped up instead. if you will: http://www.hinchy.us/demo.html

Check the image in the source of that page for more information on what I want.

Answer 1

.orange { position:relative; z-index:5; }

To get the orange above the green line. Does IE6/IE7 matter?

Answer 2

#red { z-index: 3; }
#green-right{ z-index: 2; }
.blue { z-index: 4; width: 950px; }
.orange { left: auto; right: -140px; margin-left: -108px; -margin-right: 0px; }

I have added these lines to the bottom of your styles to resolve the issue in IE6/7. Given the buggy box model of older IE, I would recommend a different sizing/positioning scheme for the red and blue boxes, so they have properly matched widths in all browsers.

Answer 3

So "pinned" meaning even if you scroll the page it stays fixed at the top and right? If that's the case you'd want:

.orange {
position: fixed;
top: 0px;
right: 0px;
}