SVG background depth

whittaker007
15 Apr 2009

Hi, I've got a series of pages set up at A4 size with a 5mm bleed. I'm laying out page content in A4 sized page containers and position the content absolutely within the A4 page divs.

Each page div first contains a background image which is a div containing an inline SVG image. The background div is set to A4 plus bleed size and positioned negatively into the bleed area. The actual page content comes after and on top of the background div.

Now this renders correctly on the screen, but the PDF that Prince produces displays the SVG background on top of all the other content, despite appearing before that content in the markup. None of the elements have a z-index set to override default stacking order.

Manually setting z-index values does seem to fix this issue, but I'd prefer not to add z-index management into the mix if I can avoid it.

mikeday
16 Apr 2009

So the problem is that the background of an absolutely positioned block is drawing over the top of content that occurs later in the document in the normal flow? That doesn't appear to be a bug; try this document in a browser:

<html>
<head>
<style>
.abs {
    background: yellow;
    position: absolute;
    padding: 100px;
    left: 20px;
}
</style>
</head>
<body>
<div class="abs">Hello!</div>
<p>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
</p>
</body>
</html>

whittaker007
16 Apr 2009

Interesting, the example I gave renders backgrounds underneath when viewed in a browser. It certainly seems like a bug, I can't see any reason why positioning the element would affect it's z-depth in contradiction with the source ordering which governs the z-index of everything else. I'm not saying it is a bug, but I'm unable to think of a reason why it should behave that way.

mikeday
16 Apr 2009

Absolutely positioned content is drawn on top by default, even when z-index is auto. The layering is described in the CSS 2.1 spec for z-index, but it is ferociously complex. Regarding your earlier example, perhaps browsers are handling SVG content differently from other background images?

Forum › Bugs