mPDF position absolute

position absolute mpdf
tomas657 picture tomas657 · Jun 1, 2013 · Viewed 22.6k times · Source

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

Ruslan Safronov picture Ruslan Safronov · Jun 19, 2013

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.

Related questions

Position: absolute and parent height?

I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them? Here's the code: HTML <section id="foo"> <header>Foo</header&…

Read More
React Native absolute positioning horizontal centre

It seems that with position:absolute in use an element cannot be centred using justifyContent or alignItems. There's a workaround to use marginLeft but does not display the same for all devices even using dimensions to detect height and width …

Read More
How can I position one element below another?

I want to put one element under another element. I am using position: absolute in CSS. I want the blue box to be positioned under the red box. How could I achieve this?

Read More