Arrows have z-index, that overlays other elements

[osj2507]

I can't get CodeSandBox to work, so have made a video showing the change in code via the console. By changing where the code is inserted in HTML, you are able to remove the z-index of the arrows and thereby they will be contained within the component.

Screenshot

Screen recording https://user-images.githubusercontent.com/1698496/122197245-48ffb300-ce98-11eb-9b51-68649d7d6880.mp4

---

Explanation In the HTML you could re-arrange it and move the button showing the arrow after the imagelist container, so that prev and next arrow are placed same place just after the images. Because of the semantics they will always be placed on top of the images and the z-index is not relevant. Then you are able to just remove the z-index of 1 set in css from both and it will still work as intended as shown on the video.

[mrviniciux]

@osj2507 I've installed the last version of react-slick and slick-carousel and didn't find any z-index property to arrows. Can you confirm which version of both libs are you using?

[osj2507]

You are correct there is not, my bad, that was a weirdly injected setting. But the issue is still there with overlaying the images with the arrows, so the previous arrow should in the code be together with the next arrow, then they would always overlay the images even if placed on top, would that be possible to do?

As can be seen here, if the arrow is after the images it will lay on top without needing to alter any settings, this already works for the dots and the next arrow since they are already placed after in the code.

[mrviniciux]

@osj2507 Hm I see, this is not necessarily an issue with the z-index property. I'm checking the feasibility for that change but I think it's fine.