Multiple headers over text content - pdf on preview

Question

I had generated multiple headers for every page of pdf will be made (dompdf) Headers are fixed, top: 0px, width: 100%. My problem is, on the second page and 3rd and so on, my header is over my text content instead to have a margin-bottom. If i put a margin bottom to header, nothing will happen (even if i put margin top for that text content). What should i do?

CSS:

#header {
            position: fixed;
            top: 0px;
            width: 100%;
            margin-top: -180px;
        }

#header img {
            height: 175px;
            width: 1000px;
            float: right;
            margin-top: 85px;
            margin-right: 50px;
        }

HTML:

<div id="header">
    <img src="sd-logo.jpg"/>
</div>

Thanks.

Answer 1

When using fixed-position element you'll want to place it in the margins of the document to prevent overlapping the body content. You attempted to do so by specifying a negative margin, but those are not fully tested. I'd recommend using negative positioning.

CSS:

#header {
  position: fixed;
  top: -180px;
  width: 100%;
}

#header img {
  height: 175px;
  width: 1000px;
  float: right;
  margin-top: 85px;
  margin-right: 50px;
}

HTML:

<div id="header">
  <img src="sd-logo.jpg"/>
</div>

Also note that, because fixed and absolutely positioned content is removed from the document flow, margins do not affect rendering of any other content.