プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
PHP、mPDFで「position:absolute」を指定。
mPDFでHTMLをPDF化して出力しているのですが、
諸事情により座標指定での画像配置が必要になりました。

要は画像を重ねて塗りつぶしがしたかったのです。

と言う訳でまずは試しにこんなHTMLにしてみましたφ(--)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=shift-JIS" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
  <style type="text/css">  
  <!--  
  
  body {
      width: 100%;
      background-color: #ffffff;
      height: auto;
      font-size: 10px;
  }
  
  /* コンテナ */
  div#container {
      width: 780px;
      height: auto;
      margin-left: auto;
      margin-right: auto;
  }
  
  -->
  </style>
  </head>
  <body>
      <div id="container"> 

          <div style="position: absolute; top:106px; left:58px;">
              <img src="./img/test/test_maru.gif" />
          </div>

          <table>
              <tr>
                  <td style="width: 164px;height: 185px;background-image:url('./img/test/test_back.jpg');background-repeat:no-repeat;">
                  </td>
              </tr>
          </table>
      </div>
  </body>
  </html>



そしたら案の定、配置されないでやんの(つд`)・°・。
mPDFで「position:absolute」は使えんのか?と涙目になりつつ
あれやこれやと調べたら特定条件化では使えるみたいです。
その特定条件は……端折って意訳すると「親要素が<body>の場合のみOK」らしい。
ちなみにマニュアルの原文はこんなのですφ(--)

  position
  
  fixed | absolute 
  absolute - uses physical page as containing element;
  fixed - uses printable page (inside margins) as containing element.
  
  (mPDF >= 4.0)
  
  NB Only supported for top-level elements i.e. where the parent element is <body>. 
  Fixed-position or floating elements nested inside other fixed-position or floating elements are not supported.


つまりさっきのHTMLで言えばこんなんすればOKφ(--)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=shift-JIS" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
  <style type="text/css">  
  <!--  
  
  body {
      width: 100%;
      background-color: #ffffff;
      height: auto;
      font-size: 10px;
  }
  
  /* コンテナ */
  div#container {
      width: 780px;
      height: auto;
      margin-left: auto;
      margin-right: auto;
  }
  
  -->
  </style>
  </head>
  <body>

      <div style="position: absolute; top:106px; left:58px;">
          <img src="./img/test/test_maru.gif" />
      </div>

      <div id="container"> 
          <table>
              <tr>
                  <td style="width: 164px;height: 185px;background-image:url('./img/test/test_back.jpg');background-repeat:no-repeat;">
                  </td>
              </tr>
          </table>
      </div>
  </body>
  </html>


body要素直下に配置したら無事反映されましたぁヾ(*´∀`*)ノ
えがったー(つ∀`)ホントえがったー(つ∀`)

ちなみに私の環境では「position: absolute」したdiv要素の中に文字を書いたら
その文字は文字化けしてしまいました。
完全に再現できるわけではないっぽいのでご注意下さい。
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:mPDF  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事