问题
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.
回答1:
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 comes 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 comes forward and divid2 comes behind divid1, and divid3 comes behind div2. I tested multiple times.
I hope it would be helpful.
回答2:
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 )...
回答3:
Try the following steps and see if one of them works for you:
- Try to put high z-index values for different divs. Example:
.div1 {z-index:1} .div2{z-index:10000). - Try to every div that you defined a z-index, define a position to him.
- Try put the div's with greatest z-index value with position absolute/fixed.
来源：https://stackoverflow.com/questions/51836736/html2canvas-z-index-not-effect