在使用剪辑路径和溢出的父 div 上方显示 div:hidden

Question

我在有序列表上设置了一个滑块，每个 li 代表一张幻灯片。包含此列表的 div 正在使用 clip-path 和 overflow:hidden 形成平行四边形。在幻灯片的 li 元素内嵌套了另一个包含 h1 和 h2 标签的 div。情况是，我尝试将这些标题部分定位在平行四边形边界之外，从而产生重叠 - 这不起作用，因为剪辑路径似乎覆盖/剪切了标题。我尝试了 z-index 和很多方法，但都是徒劳的。你可以在这里看到问题：www.korkboden-mit-stil.de

非常感谢任何想法/帮助。问候！

滑块 html 是：

<aside id="fh5co-hero">
            <div class="flexslider">
                <ul class="slides" style="background:rgba(232, 232, 232, 0.6);">
                <li style="background-image: url(images/site/slider/korkparkett_verlegen.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html">30 Jahre Korkparkett</a></h1>
                                        <h2>Hochwertiger Korkboden, solide Ideen, exzellent verlegt.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="background-image: url(images/site/slider/korkbelag_kuechen.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html"">Think Out of the Box</a></h1>
                                        <h2 style="color:#000">Korkparkett lässt sich beinahe beliebig variieren. Muster, Farbe, Verlegeart, selbst extravagante Formen.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="background-image: url(images/site/slider/fussbodenbelag_kork.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html"">Übrigens</a></h1>
                                        <h2>Kostenfreie Baustellenbesichtigung und Angebotserstellung garantiert.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="background-image: url(images/site/slider/korkboden_varianten_sanierung.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
                                <div class="slider-text-inner">
                                    <h1><a href="contact.html"">Besuchen Sie uns</h1>
                                        <h2 style="color:#000">Eine Vielzahl der neuen Muster 2020 sehen Sie jetzt in unserem Musterhaus.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>       
                </ul>
            </div>
        </aside>

对应的CSS是：

#fh5co-hero .flexslider .slides {
position: relative;
overflow: hidden;
}

#fh5co-hero .flexslider .slides li {
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
min-height: 800px;
position: relative;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

#fh5co-hero .flexslider .slides .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#fh5co-hero .flexslider .slider-text {
opacity: 0;
min-height: 800px;
position: relative;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text {
  min-height: 500px;
display:none;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
position: absolute;
bottom: 0;
left: 0;
padding: 0 2em 3em 0;
margin-left: 0px;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
  text-align: right;
  margin-left: 100px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
margin: 0;
padding: 0;
color: black;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
margin-bottom: 10px;
font-size: 60px;
line-height: 1.3;
font-weight: 300;
color: #fff;
display: inline;
display: inline;
background-color: #240C08;
box-shadow: 0.1em 0 0 #191919, -0.1em 0 0 #151515;
padding: 0.1em 0.3em;
box-decoration-break: clone;
}

#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 a {
color: #fff;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
  font-size: 24px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 22px;
line-height: 1.5;
margin-bottom: 10px;
margin-top: 10px;
color: rgba(255, 255, 255, 0.8);
font-family: "Open Sans", arial, sans-serif;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 a {
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

Answer 1

恐怕以目前的结构几乎不可能，迈克尔。 z-index 将无济于事，因为内部（子）元素将被其父容器裁剪。

如果不改变结构，我建议将背景图片放在标题之后，例如作为img 元素或imgs 在span 或div 中，使它们填充整个父li 容器，并使用z-index 将它们置于低于标题的位置。

希望这会有所帮助 :) 节日快乐！

编辑：请以以下笔为例：https://codepen.io/Nekto/pen/ZEYJwjx