htmlpagefooter element does not respect z-index

[wgstjf]

Guidelines

• I understand that if I fail to adhere to contribution guidelines and/or fail to provide all required details, this issue may be closed without review.

Description of the bug

We are setting a page footer using the code shown below and styling it using CSS

The issue is that whatever we do we cannot get the footer content to sit behind the page content. The page content is wrapped within a div with the class page-content and styled as below.

Is the footer layer treated differently to other content as it was defined using the htmlpagefooter tag? If so how can we get the desired result of a footer fixed to the bottom of all pages except the first but still respect z-index?

Cheers,

Will

mPDF version

8.2.2

PHP Version and environment (server type, cli provider etc., enclosing libraries and their respective versions)

Apache PHP 8.0.0

Reproducible PHP+CSS+HTML snippet suffering by the error

<htmlpagefooter name="PageFooter">
<div class="page-footer" style="background-image: url(/pdf-assets/images/page-footer-bg.png);"></div>
</htmlpagefooter>

.page-footer {
  position: absolute;
  bottom:0;
  left:0;
  width:100%;    
  height: 60mm;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  z-index:1 !important;
}

<sethtmlpagefooter name="PageFooter" value="on" />
<div class="page-content">
  <p>Some Content</p>
</div>

.page-content {
  position:relative;
  z-index:3 !important; 
}

[finwe]

This is not supported and documented:

https://mpdf.github.io/css-stylesheets/supported-css.html
https://mpdf.github.io/what-else-can-i-do/layers.html

CSS z-index can be used to utilise layers in the PDF document.

CSS can set the z-index for any block element or image (default: 0). This does not work on block elements with fixed or absolute position.

[wgstjf]

Thanks for the prompt reply and for pointing me back to the documentation.

Would you have any handy tips on how to achieve an absolutely positioned footer image that fits below the page copy?

[finwe]

Given the request for footer overlapping page content, I am afraid I do not have any suggestions.

[wgstjf]

In case anyone's struggling with the same issue, we resolved it by applying a background image to the body rather than trying to set it using the page footer:

$mpdf->SetDefaultBodyCSS('background', "url('/pdf-assets/images/page-footer-bg.jpg')");
$mpdf->SetDefaultBodyCSS('background-repeat', 'no-repeat');
$mpdf->SetDefaultBodyCSS('background-position', '0 100%'); 
$mpdf->SetDefaultBodyCSS('background-image-resize', 4); //Resize-to-fit w (keep aspect ratio) - https://mpdf.github.io/css-stylesheets/supported-css.html