I am using html2canvas library for converting a div to png.

I have an issue about z-index. As you can see on image, I have boxes. Inside a box I have a div for background coloring (z-index: 0), its growing with height value and a div for number (z-index: 1). It works fine on browser as usual but when I try to take image, it seems like z-index doesn't work.

normal on browser:

issue on image version:

Any help, I will be grateful.

I am using html2canvas library for converting a div to png.

I have an issue about z-index. As you can see on image, I have boxes. Inside a box I have a div for background coloring (z-index: 0), its growing with height value and a div for number (z-index: 1). It works fine on browser as usual but when I try to take image, it seems like z-index doesn't work.

normal on browser:

issue on image version:

Any help, I will be grateful.

• javascript
• html
• css
• html2canvas

5 Answers 5

Have you checked this: for z-index to work correctly, every element that has one must also have a position set ( e.g.position:relative )...

I had to add position:"relative" to every element at the same level as my images.

I got the same issue. And I found out that html2canvas ignores z-index and just follows the order of div when it draws div to img. For example,

<div id=1 zIndex=2></div>
<div id=2 zIndex=3></div>
<div id=3 zIndex=1></div>

If all these divs are overlapping, divid2 es forward then divid1 and divid3 in webpage since it cares about the zIndex.

html2canvas only cares about the order of divs ignoring zIndex which means divid1 es forward and divid2 es behind divid1, and divid3 es behind div2. I tested multiple times.

I hope it would be helpful.

Try the following steps and see if one of them works for you:

1. Try to put high z-index values for different divs. Example: .div1 {z-index:1} .div2{z-index:10000).
2. Try to every div that you defined a z-index, define a position to him.
3. Try put the div's with greatest z-index value with position absolute/fixed.

If you are testing it in localhost, You can do so by passing one of the options in the html2canvas function.

html2canvas(document.body,
{
useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF
onrendered: function (canvas) {
 //your functions here
}
});