Paul. Paul. - 1 month ago 9
PHP Question

Multiple headers over text content - pdf on preview

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

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.