position - 在使用剪辑路径和溢出的父 div 上方显示 div:hidden
问题描述
我在有序列表上设置了一个滑块,每个 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);
}
解决方案
迈克尔,恐怕以目前的结构几乎不可能。z-index
将无济于事,因为内部(子)元素将被其父容器裁剪。
如果不改变结构,我建议将背景图像放在标题之后,例如作为img
元素或img
s 在 a span
ordiv
中,使它们填充整个父li
容器并将它们放在低于标题的位置z-index
。
希望这会有所帮助:) 节日快乐!
编辑:请以以下笔为例:https ://codepen.io/Nekto/pen/ZEYJwjx
推荐阅读
- ios - 在集合视图单元格中的 UIView 上设置渐变背景
- r - R中的正则表达式将单词与杂乱语音数据中的语音注释进行匹配
- php - 我正在使用 php 通过 PHP 和客户端凭据流连接到 spotify 的 API
- node.js - 如何使用 sequelize-typescript 从源实例创建关联实例
- r - 任何人都可以帮助解释两个站点之间物种组成的 ANOSIM 结果吗?
- python - 当 if-else 块的两个子句中都存在赋值时,为什么没有为变量赋值?
- python-3.x - 加速熊猫 series.rolling.appy()
- android - 如何使用单条字符和单线生成组合图
- html - 按指定尺寸搜索图片
- linux - 如何使用 wget 访问两个网站,但将第一个网站的输出发送到`/dev/null`?