Set format view Export PDF using MPDF in codeigniter

Question

i try to export my costumes Sticker, i have set in my view HTML using position:relative; to set possition image and text other,
My view in browser is oke,

my code view plant_v in html

        body, html {
            margin: 0;
            padding: 0;
        }
        body {
            color: black;
            display: table;
            font-family: Georgia, serif;
            font-size: 24px;
            text-align: center;
        }
        .container {
            position:relative;
            width: 260mm;
            height: 150mm;
            display: table-cell;
            vertical-align: middle;
        }
        
        img {
          position:relative;
        }
        .gambar_qrcode {
            position: absolute;
            width: 4.8cm;
            height: 4.9cm;
            right: 187px;
            top: 130px;
        }
        .judul_nama{
          position:absolute;
          font-family: Lucida Console;
          color: black;
          font-size: 1.5cm;
          left: 50px;
          top: 150px;
            }
        .nama_latin{
          position:absolute;
          color: black;
          font-family: Lucida Calligraphy, Lucida Handwriting, WhisperWrite, Brush Script MT;
          font-style: italic;
          font-size: 1cm;
          left: 40px;
          top: 230px;
        }
    </style>

and my code export MPDF is

public function cetak($tanaman)
{

$id = decode_url($tanaman);
$data['tanaman'] = $this->tanaman->get_tanaman_by_id($id);
  // Define a page size/format by array - page will be 190mm wide x 236mm height
  $mpdf = new \Mpdf\Mpdf(['mode' => 'utf-8', 'format' => [260, 150]]);
  $html = $this->load->view('plant/export_v',$data,TRUE);
  $mpdf->WriteHTML(utf8_encode($html));
  // $mpdf->Output("".$id.".pdf" ,'D');
  $mpdf->Output("".$id.".pdf" ,'I');

}

but after export to PDF using mPDF this my view after export to PDF

Answer 1

Fixed positioning is limited in MPDF, and it seems like position: relative; is not supported.

As an alternative you can use negative margins:

<img src="img.jpg" style="float: left; margin: #Negative margin# " />

And instead of using absolute positioning, you can try to use float positioning.