css - Z-index 未按预期工作 - 文本显示在块下
问题描述
我很难解决这个 z-index 问题,所以我想分享它并寻求帮助,以防有人也遇到这个问题。
会发生什么: 当用户将鼠标悬停在每个块上时,每个工具提示都会显示,但不幸的是它显示在块下方,因此工具提示整体上不可见。我有 css 经验,但这对我来说真的很棘手。提前感谢您的帮助!
.main-container .row {
width: 100%;
table-layout: fixed;
}
.row {
display: table;
table-layout: fixed;
width: 100%;
position: relative;
}
.main-container .row-inner {
position: relative;
display: table;
table-layout: fixed;
height: 100%;
min-width: 100%;
width: auto;
}
.main-container .row-container > .row-parent .row-child > .row-inner > div {
padding: 0px 0px 0px 36px;
}
.row div.column_child.pos-top, .row div.column_child.pos-top .uncell {
vertical-align: top;
}
.row .uncol {
display: block;
position: relative;
}
.row .uncoltable {
display: table;
table-layout: fixed;
position: relative;
width: 100%;
height: 100%;
}
.row .uncell {
display: table-cell;
position: relative;
height: 100%;
vertical-align: inherit;
border: 0;
}
.tooltips-wrapper .uncont {
position: relative;
}
.tooltips-wrapper .tooltip-title {
background: #fff;
padding: 32px 0;
}
.co-umime .uncode_text_column {
max-width: 910px;
margin: 0 auto;
}
.co-umime .tooltip {
display: none;
padding: 30px;
border-radius: 5px;
position: absolute;
top: 85%;
margin: 0 !important;
background: #fff;
left: 12%;
max-width: 480px;
width: 100%;
z-index: 1;
}
.co-umime .tooltip p {
text-align: left;
font-weight: 400;
color: #46454E;
font-size: 16px;
line-height: 22px;
padding: 0;
}
.tooltips-wrapper .tooltip-title p {
text-align: left;
padding-left: 86px;
color: #46454E;
font-size: 20px;
font-weight: bold;
line-height: 30px;
}
.tooltips-wrapper .tooltip-title p img {
vertical-align: middle;
line-height: 1;
position: absolute;
left: 29px;
top: 50%;
transform: translateY(-50%);
z-index: 0;
}
<div class="tooltips-wrapper vc_custom_1530264908310 row-internal row-container boomapps_vcrow">
<div class="row row-child">
<div class="row-inner" style="height: 95px; margin-bottom: -1px;">
<div class="pos-top pos-center align_left column_child col-lg-4 boomapps_vccolumn single-internal-gutter">
<div class="uncol style-light">
<div class="uncoltable">
<div class="uncell boomapps_vccolumn no-block-padding">
<div class="uncont">
<div class="uncode_text_column tooltip-title">
<p><img class="alignnone size-full wp-image-72965" src="/insightlab/wp-content/uploads/2018/06/lightbulb.png" alt="" width="35" height="37">Online deníčky</p>
</div>
<div class="uncode_text_column tooltip">
<p>Jde o kvalitativní výzkumnou metodu, kdy si lidé v delším časovém období zaznamenávají své zkušenosti a odpovídají na aktuální témata a otázky moderátora.</p>
<p>Do online deníčku má přístup jen účastník a moderátora. Je možné se dostat do velkého detailu, která není rušena interakcemi ostatních.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pos-top pos-center align_left column_child col-lg-4 boomapps_vccolumn single-internal-gutter">
<div class="uncol style-light">
<div class="uncoltable">
<div class="uncell boomapps_vccolumn no-block-padding">
<div class="uncont">
<div class="uncode_text_column tooltip-title">
<p><img class="alignnone size-full wp-image-72965" src="/insightlab/wp-content/uploads/2018/06/lightbulb.png" alt="" width="35" height="37">Privátní panel</p>
</div>
<div class="uncode_text_column tooltip">
<p>Privátní on-line panel je souborem vašich zákazníků, kteří si na požádání rádi vyhradí čas, aby se spolupodíleli na vašem úspěchu. Nezáleží na tom, zda je zrovna oslovíte s dotazníkem, nebo je přizvete k diskuzi o designu nového produktu.</p>
<p>Jsou vaším poradním sborem, který vám pomáhá nastavit novou koncepci i vyladit drobné detaily.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pos-top pos-center align_left column_child col-lg-4 boomapps_vccolumn single-internal-gutter">
<div class="uncol style-light">
<div class="uncoltable">
<div class="uncell boomapps_vccolumn no-block-padding">
<div class="uncont">
<div class="uncode_text_column tooltip-title">
<p><img class="alignnone size-full wp-image-72965" src="/insightlab/wp-content/uploads/2018/06/lightbulb.png" alt="" width="35" height="37">Výzkumné online komunity</p>
</div>
<div class="uncode_text_column tooltip">
<p>Pomohou vám poznat vaše zákazníky. Vytvoří efektivní a operativní model komunikace. Usnadní vám tak cestu k rychlé zpětné vazbě, ale také novým nápadům a inspiracím. Zákaznické komunity pomáhají přirozeně tvořit skupinu ambasadorů vaší značky.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
看来您的主要问题在于您的堆叠顺序。您正在尝试建立一个嵌套 div,它的 z-index 高于外部容器中的同级 div。
IE
//index.html
<div class="sibling one">
<div class="child"></div>
</div>
<div class="sibling two">
<div class="child"></div>
</div>
//style.css
.sibling {
position: relative;
display: block;
width: 50%;
}
.child {
position: absolute;
}
.sibling.one .child {
z-index: 2;
}
.sibling.two .child {
z-index: 1;
}
问题在于,孩子继承了父母的堆叠顺序。这意味着,无论提供什么 z-index,它都不能堆叠在其父容器的下方。
因此,您有两个选择。您可以使工具提示将其 html 输出到所有提供的悬停容器上下文之外的外部容器中。
或者,您可以简单地制作一个 javascript,将.pos-top.column_child
站点该部分中所有元素的 z-index 设置为0
,仅将pos-top.column_child
被悬停的 z-index 设置为1
。
所以像这样(使用jquery):
function openToolTip( event ){
var el = $(event.currentTarget);
var otherEls = $('.tooltips-wrapper .pos-top.column_child') //the only way i could uniquely select those cells. You should probably try to name these in your html to better target them.
otherEls.css({zIndex:0});
el.css({zIndex:1});
}
function hideOtherRows( event ){
var el = $(event.currentTarget);
var otherEls = $('.tooltips-wrapper') ;
otherEls.css({zIndex:0});
el.css({zIndex:1});
}
$('[data-section=3] .pos-top.column_child').on("mouseover", openToolTip);
$('.tooltips-wrapper').on("mouseover", hideOtherRows);
将其粘贴到您网站的控制台中会产生我们期望的结果。自己试试吧。
这应该有助于理解堆叠上下文:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ https://www.stevefenton.co.uk/2012/08/z-index-and-the-堆叠上下文/
推荐阅读
- java - 在android中使用用户输入来创建一个对象
- machine-learning - 训练具有大批量和少量 GPU 的 MXNet
- c# - OpenGL渲染:所有顶点移动到单位球体的边界
- javascript - 使用 Electron 访问 webview DOM
- javascript - 查找 ID 数组,并将它们映射到单独架构中的项目数组
- bitbucket - Bitbucket Cloud Pipelines:如何将 Vue-Cli 应用程序部署到 bitbucket.io 作为静态 Web 主机?
- python - 如何有效地将大字符串从 Python 传递到 C++ 扩展方法?
- powershell - 在 Powershell 中,如何使用接受集合的构造函数创建 HashSet?
- reactjs - React:如何保持私有方法绑定到相关组件?
- python - 如何修复 MongoDB 中的聚合查询和更新查询?