Oxygen XML Forum

Hi,
I'm trying to have images overlap each other using CSS when transforming to PDF.
But I cannot seem to get z-index to work for some reason. The z-index doesn't seem to have any effect. Can someone tell me why this is the case?

I have two images in a topic. One with outputclass "imageabove", and the other image with outputclass "imagebelow". The second image is always placed on top of the first image regardless of what z-index I set.

.imageabove {
position: absolute;
top: -50px;
left: -50px;
z-index: 2;

}

.imagebelow {
position: absolute;
display: block;
top: -20px;
z-index: 1;
}

Hello,

Oxygen PDF Chemistry doesn't support z-index yet, I added your vote to the feature request and I will notify this thread once the support will be available.
The only workaround could be to merge both images in a single one (an SVG for example) and position the final result in the PDF.

Regards,
Julien

julien_lacour wrote: ↑Mon Dec 11, 2023 5:12 pm Hello,

Oxygen PDF Chemistry doesn't support z-index yet, I added your vote to the feature request and I will notify this thread once the support will be available.
The only workaround could be to merge both images in a single one (an SVG for example) and position the final result in the PDF.

Regards,
Julien

All right, well that explains it!
And there isn't any other workaround I can use until then? It works well to have the image I want to be placed on top "last in chain" in my topic (and position the image manually in the CSS). But this is not optimal since the person who will continue to work in the manual after me will have a hard time understanding why the order of images is the way it is.

Fingers crossed that this is being implemented in the near future

Hello,

I'm not sure I fully understood the "last in chain" part, you need to have the image inside the DITA topic?
Basically you can directly refer the combined image in the CSS and keep it close to it to make this works.
Maybe you could send us a small sample with the topic, the images and the CSS and maybe how you want your PDF to look like at support@oxygenxml.com for a deeper analysis.

Regards,
Julien

julien_lacour wrote: ↑Wed Dec 13, 2023 2:44 pm Hello,

I'm not sure I fully understood the "last in chain" part, you need to have the image inside the DITA topic?
Basically you can directly refer the combined image in the CSS and keep it close to it to make this works.
Maybe you could send us a small sample with the topic, the images and the CSS and maybe how you want your PDF to look like at support@oxygenxml.com for a deeper analysis.

Regards,
Julien

I just meant that the image I place last in the topic is always rendered on top of the previous image. So as a workaround (until z-index is implemented), I can place an image I want to be on top of another as the last image in the topic and use the positioning. But this is not optimal for someone who doesn't understand why I placed, for example, the image that should be shown in the top corner of a page as the last image in my topic

Hello,

Could you send us a small sample at support@oxygenxml.com, we can try to optimize your "last in chain" solution to make it clearer for anybody checking your customization.
We will need at least one of the topics with the images, and the stylesheet(s) you are using in your transformation (or the full publishing template if you have one).

Regards,
Julien