使用React Slick进行轮播时出现问题

Question

使用React-slick时遇到一些问题。

我要寻找的东西：我正在尝试使用多项目轮播。这些项目是图片，当您单击它时，就会出现一个叠加层，该叠加层会溢出（我将其制作为一个组件），以播放由iframe嵌入的youtube视频。

我的问题是什么：当我点击图片观看视频时，覆盖层不会与轮播重叠，而是在其中播放。

以下是轮播代码的一部分：

class Slideshow extends Component {
    render() {
        const settings = {
            dots: true,
            infinite: true,
            arrows: true,
            speed: 500,
            slidesToShow: 3,
            slidesToScroll: 4
        };

        return (
            <div className="slideshow-div">
                <h2> Slideshow test </h2>
                <Slider {...settings}>
                    <div>
                        <h3><VideoOverlay /></h3>
                    </div>
                    <div>
                        <h3>Picture 2</h3>
                    </div>
                    <div>
                        <h3>Picture 3</h3>
                    </div>
                    <div>
                        <h3>Picture 4</h3>
                    </div>
                    <div>
                        <h3>Picture 5</h3>
                    </div>
                </Slider>
            </div>
        );
    }
}

export default Slideshow;

这是我叠加层CSS的一部分，“应该”使轮播覆盖，但事实并非如此：

.inner_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    margin: auto;
    padding: 10px 20px 30px 20px;
    background-color: white;
    z-index: 1000!important;
    line-height: 1;
    list-style: none outside none;
}

如果有任何提示，我将非常感谢。

祝您有个美好的一天。