php - How to position pernament div in custom place on page

Question

I have problem with positiong div with content in custom place on page pernament way , that means div will be 20px of bottom no matter what:). Problem is that i using online invoice manager for my company and i want littel customization for my invoice . Namely i want signature on invoice will be pernament 20px from bottom, beacuse now signature is moving down whem o add content . In this manager postition: relative is turn off and i can'f figure out how to do it .

I Include html code for invoice , div with signature is class="podpis" and there are inside to div's with txt.

<style>
    /*body {
        margin-bottom:177px;
        margin-top:118px;
    }
    */
  page {
    padding: 20 15 20 15;
    font-size: 8;
    font-family: LiberationSans;
  }

  td, th {
    padding: 0.5 1 0 1;
  }

  translation {
    <? if ($invoice['Invoice']['translation_language_id']):?> 
      font-size: 6;
      font-style: italic;
      display: inline;
    <? else: // w przypadku faktury w j?zyku polskim t?umaczenia s? ukryte ?>
      display: none;
    <? endif ?>
  }
</style>

<? foreach ($parameters['pages'] as $page): ?>
<page>
  <header id="top" height="85">
    <style>
      .invoice-header {
        position: absolute;
        y: -10;
        text-align: center;
      }
      #top {
      margin-top:118px;
      }
      /* logo */
      .invoice-logo {
        width: 45%;
        height: 40;
        float: left;
      }

      /* main info - start */
      .invoice-main-info {
        width: 48%;
        float: right;
      }

      .invoice-main-info tr th {
        padding: 1.5 0 1.5 0;
      }
      .invoice-main-info tr td {
        padding: 1 0 1 1;
      }

      .invoice-main-info tr:child(0) {
        font-size: 9;
        text-align: center;
        background-gradient-type: linear;
        background-gradient-color1: white;
        background-gradient-color2: lightgrey;
      }

      .invoice-main-info tr td div:child(0) {
        width: 49%;
        float: left;
      }

      .invoice-main-info tr td div:child(1) {
        width: 49%;
        float: right;
      }

      .invoice-main-info tr td div div:child(0) {
        width: 57%;
        float: left;
      }

      .invoice-main-info tr td div div:child(1) {
        width: 42%;
        float: right;
      }
      /* main info - stop */


      /* transaction sides - start */
      .invoice-transaction-side:child(0) {
        width: 48%;
        float: left;
      }

      .invoice-transaction-side:child(1) {
        width: 48%; 
        float: right;
      }
      /* transaction sides - stop */


      .invoice-bar {
        position: absolute;
        y: 71;
        font-size: 10;
        text-align: right;
        padding: 0 1 -0.5 0;
        margin-top: 2;
        border-bottom: 1px;
        background-gradient-type: linear;
        background-gradient-color1: white;
        background-gradient-color2: lightgrey;
        background-gradient-coordinates: 0 0 1 0;
      }
    </style>

    <? if ($invoice['Invoice']['header']): ?>
    <p class="invoice-header"><?=$xml->sanitize($invoice['Invoice']['header']);?></p>
    <? endif ?>

    <div class="invoice-logo">
      <? if ($parameters['logo_path']): ?>
      <img width="80" src="<?=$parameters['logo_path']?>"/>
      <? endif ?>
    </div>

    <div class="invoice-main-info">
      <table>
        <tr>
          <th>Faktura<?=$xml->sanitize($parameters['document_name_suffix'])?> nr <?=$xml->sanitize($invoice['Invoice']['fullnumber'])?></th>
        </tr>
        <tr>
          <td>
            <div>
              <div>Data wystawienia:<br/><translation><?=$translation->get('Invoice:Data wystawienia')?></translation></div>
              <div><?=$xml->sanitize($invoice['Invoice']['date'])?></div>
              <div clear="both"/>
            </div>

            <div>
              <? if(!$invoice['Invoice']['disposaldate_empty']): ?>
                <div>Data sprzeda?y:<br/><translation><?=$translation->get('Invoice:Data sprzeda?y')?></translation></div>
                <div><?=$xml->sanitize($invoice['Invoice']['disposaldate_format'] == 'month' ? date('Y-m', strtotime($invoice['Invoice']['disposaldate'])) : $invoice['Invoice']['disposaldate'])?></div>
              <? endif ?>
              <div clear="both"/>
            </div>

            <div clear="both"/>
          </td>
        </tr>
        <tr>
          <td>
            <div>
              <div>Termin p?atno?ci:<br/><translation><?=$translation->get('Invoice:Termin p?atno?ci')?></translation></div>
              <div><?=$xml->sanitize($invoice['Invoice']['paymentdate'])?></div>
              <div clear="both"/>
            </div>

            <div>
              <div>Metoda p?atno?ci:<br/><translation><?=$translation->get('Invoice:Metoda p?atno?ci')?></translation></div>
              <div><?=$xml->sanitize($invoice['Invoice']['paymentmethod'])?><br/><translation><?=$xml->sanitize($translation->get('Invoice:'.$invoice['Invoice']['paymentmethod']))?></translation></div>
              <div clear="both"/>
            </div>

            <div clear="both"/>
          </td>
        </tr>
      </table>
    </div>

    <div clear="both"/>

    <? if ($parameters['duplicate']): ?>
    <div position="absolute" x="50" y="25">
      <img width="40" src="/images/duplicate/<?=date("Y-m-d")?>.png"/>
    </div>
    <? endif ?>

    <div class="invoice-transaction-side">
      <h3>Sprzedawca: <translation>(<?=$translation->get('Invoice:Sprzedawca')?>)</translation></h3>
      <p><?=nl2br($xml->sanitize($invoice['Invoice']['sellerinfo']))?></p>
    </div>

    <div class="invoice-transaction-side">
      <h3>Nabywca: <translation>(<?=$translation->get('Invoice:Nabywca')?>)</translation></h3>
      <p><?=nl2br($xml->sanitize($invoice['Invoice']['buyerinfo']))?></p>
    </div>

    <div clear="both"/>

    <div class="invoice-bar">
      <? if ($parameters['show_page_type']): ?>
        <?=$page == 'original' ? 'O R Y G I N A ?' : 'K O P I A'?>
      <? else: ?>
        <br/>
      <? endif ?>
    </div>
  </header>

  <body>
    <table>
      <header>
        <tr>
          <td width="3%">Lp<br/><translation><?=$translation->get('Invoice:Lp')?></translation></td>
          <td>Nazwa<br/><translation><?=$translation->get('Invoice:Nazwa')?></translation></td>
          <? if ($parameters['show_classification']): ?>
          <td width="7%">PKWiU<br/><translation><?=$translation->get('Invoice:PKWiU')?></translation></td>
          <? endif ?>
          <td width="6%">Jedn.<br/><translation><?=$translation->get('Invoice:Jedn.')?></translation></td>
          <td width="6%">Ilo??<br/><translation><?=$translation->get('Invoice:Ilo??')?></translation></td>
          <td width="11%"><?=$invoice['Invoice']['tax_evaluation_method'] == 'netto' ? 'Cena netto' : 'Cena brutto'?><br/><translation><?=$translation->get('Invoice:Cena')?></translation></td>
          <? if ($parameters['show_discount']): ?>
          <td column-span="2">Rabat</td>
          <? endif ?>
          <td width="8%">Stawka<br/><translation><?=$translation->get('Invoice:Stawka')?></translation></td>
          <td width="12%">Warto?? netto<br/><translation><?=$translation->get('Invoice:Warto?? netto')?></translation></td>
          <td width="12%">Warto?? brutto<br/><translation><?=$translation->get('Invoice:Warto?? brutto')?></translation></td>
        </tr>
      </header>

      <? foreach ($invoiceContents as $key => $invoiceContent): ?>
      <tr class="invoice-content">
        <td><?=$key + 1?></td>
        <td><?=$xml->sanitize($invoiceContent['InvoiceContent']['name'])?></td>
        <? if ($parameters['show_classification']): ?>
        <td><?=$xml->sanitize($invoiceContent['InvoiceContent']['classification'])?></td>
        <? endif ?>
        <td><?=$xml->sanitize($invoiceContent['InvoiceContent']['unit'])?></td>
        <td class="invoice-content-count"><?=$xml->niceFloat($invoiceContent['InvoiceContent']['count'])?></td>
        <td class="invoice-content-price"><?=$xml->currency($invoiceContent['InvoiceContent']['price'])?></td>
        <? if ($parameters['show_discount']): ?>
        <td width="5%"><?=$xml->niceFloat($invoiceContent['InvoiceContent']['discount_percent'])?>%</td>
        <td width="9%"><?=$xml->currency($invoiceContent['InvoiceContent']['discount_amount'])?></td>
        <? endif ?>
        <td><?=$invoiceContent['InvoiceContent']['vatcode']?></td>
        <td class="invoice-content-netto"><?=$xml->currency($invoiceContent['InvoiceContent']['netto'])?></td>
        <td class="invoice-content-brutto"><?=$xml->currency($invoiceContent['InvoiceContent']['brutto'])?></td>
      </tr>
      <? endforeach ?>
    </table>
  </body>

  <footer height="80" margin-top="5">
    <style>
      /* vat sums - start */
      .invoice-sums {
        float: left;
        width: 50%;
      }
      .invoice-sums th {
        font-style: normal;
      }
      /* vat sums - stop */


      /* payment info - start */
      .invoice-payment-info {
        border:0;
        float: right;
        width: <?=$invoice['Invoice']['translation_language_id'] ? '40%' : '30%'?>;
      }
      .invoice-payment-info tr td:child(1) {
        text-align: right;
      }
      /* payment info - stop */


      /* annotations - start */
      .invoice-annotations {
        float: left;
        width: 48%;
      }
      .invoice-annotations p {
        margin-top:3;
      }
      /* annotations - stop */

      .invoice-qr-code {
        width: 25;
        float: right;
        text-align: center;
        font-size: 6;
      }

      .invoice-additional-image {
        float: right;
        width: 70;
      }


      /* signatures - start */
      .invoice-signature {
        text-align: center;
        width: 45;
      }
      .invoice-signature:child(0) {
        float: left;
      }
      .invoice-signature:child(1) {
        float: right;
      }
      .invoice-signature span:child(0) {
        font-style: bold;
      }
      .invoice-signature span:child(1) {
        font-siz

Answer 1

I think you're looking for the position:fixed CSS attribute.

See this fiddle.

.fixed {
  position: fixed;
  top:20px;
  left:20px;
}