css - Z-index 未按预期工作 - 文本显示在 block 下

Question

我很难解决这个 z-index 问题，所以我想分享它并寻求帮助，以防有人也遇到这个问题。

发生了什么:当用户将鼠标悬停在每个 block 上时，每个工具提示都会显示，但不幸的是它显示在 block 下方，因此工具提示整体不可见。我有 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&nbsp;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>

Answer 1

看来您的主要问题是堆叠顺序。您正在尝试建立一个嵌套的 div，它的 z-index 高于外部容器中的同级 div。

即

//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-stacking-context/