mPDF position absolute

Question

I need to generate PDF file from HTML input:

<div style="width: 14cm; height: 21cm; position: relative">
  <img src="bg-image.jpg" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
  <img src="image.jpg" style="width: 100px; height: 100px; position: absolute; left: 5cm; top: 5cm">
</div>

where first image is background and second image is user input (smaller photo).

Problem is that when I try to generate in to PDF file with mPDF library, images are not displayed on one page, but one image is on first page, second image is on second page. So I think that absolute positioning does not work and I do not know how to fix it. I can not use first image as background image because its natural dimensions are smaller than background area it have to fill.

Can you give me some advice, please? What is wrong?

Answer 1

I don't know mPDF but if the problem is absolute positioning you could just use float positioning with negative margins:

<img src="image.jpg" style="float: left; margin: -16cm 0 0 -9cm" />

Answer 2

mPDF only supports position:absolute|fixed partially - as root elements i.e. it will not position blocks absolutely inside another block. This is a known limitation of mPDF.