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):
For the floating element, in this case a text box:
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?
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?