Z索引无法正常工作-文本显示在块下

时间：2018-08-23 18:09:24

标签： css wordpress z-index

我很难解决此z-index问题，因此我想与他人分享并寻求帮助。

会发生什么：enter image description here 当用户将鼠标悬停在每个块上时，会显示每个工具提示，但不幸的是，它显示在块下方，因此整个工具提示不可见。 我在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>

1 个答案:

答案 0 :(得分：2)

看来您的主要问题在于您的堆叠顺序。您正在尝试建立嵌套的div，该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如何，都不能将其堆叠在其父容器的z-index以下。

因此，您有两个选择。您可以使它的工具提示将其html输出到所有提供的悬停容器上下文之外的外部容器中。

或者，您可以简单地制作一个javascript，将您网站的该部分中所有.pos-top.column_child元素的z-index设置为0，仅使{{ 1}}悬停在pos-top.column_child上。

类似这样（使用jquery）：

1

将其粘贴到网站的控制台中即可获得我们期望的结果。自己尝试一下。

这应该有助于理解堆栈上下文：

  

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/

相关问题
最新问题