Hi,

I am styling a book that has a lot of floating print-to-edge images and text boxes with coloured background. I don't want to have the page footer on top of these images and text boxes.

So I tried to apply the z-index property in order to just have Prince stack the page footer underneath the image or text box, but it doesn't seem to work. I have CSS like this:

For the page footer (on the right side):

@page :right {
	@bottom-right {
	        position: relative;
                z-index: 1;
                content: string(header, first) counter(page);
	}
}

For the floating element, in this case a text box:

.textbox{
        float: bottom;
        position: relative;
        z-index: 2;
        background-color: #DDDCCF;
        margin-top: 13pt;
        margin-right: -25mm;
        margin-bottom: -20mm;
        margin-left: -25mm;
        padding-top: 13pt;
        padding-right: 25mm;
        padding-bottom: 20mm;
        padding-left: 25mm;
}

So my question is: How does the page footer stack, since I am not able to change the stacking order with z-index effectively hiding the footer underneath my print-to-edge text box?

Currently it is not possible to change the stacking order of content in page margin boxes relative to content on the page body itself.

If you can identify which pages will have the large images then perhaps you could disable the footer entirely on those pages?

Is it possible to make a page selector on a floating element?

No, it's not possible to select the page on which a particular element appears, unless that element uses named pages and forces a page break before it.

How is it possible then to disable the footer on the pages in question?

Sorry it is only possible if you know eg. it will be the first page in the chapter, or the page following a manually forced page break.