Question

So i’ve run into an annoying issue where i’ve set a wide border (15px) on a <div> and I have an element that is floated right inside of that <div> with a negative margin to top so that it slightly overlaps the border. This was working fine until I set the <div> to overflow-y:scroll and now instead of the the text overlapping the border the border overlaps the text. I’m at a loss as to why this occurs and how to fix it.

• live demo | the h1 element at the top of each .window is being overlapped by the border but if you disable the overflow-y:scroll on .window then it is fine.

What i’ve tried so far

• I tried giving the h1 a higher z-index than the .window

Answer 1

Try this on the h1:

h1 {
font-size: 500%;
margin-top: -38px;
padding-top: 0px;
position: absolute;
width: inherit;
text-align: right;
}