Search code examples
csswordpressz-index

Z-index not working as expected - text showing under blocks

I am having a hard time solving this z-index issue so I would like to share it and ask for help in case someone had this problem too.

What happens: enter image description here When user hovers on each blocks, each tooltip is showing up but unfortunately it's showing under the blocks so the tooltip is not visible as whole. I have experiences in css but this one is really tricky for me. Thanks in advance for help!

.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>

Solution

  • It seems your main issue is with your stacking order. You are trying to establish a nested div, which has a z-index higher than sibling divs in outer containers.

    i.e.

    //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;
}

    the problem with this, is that children inherit the stacking order of their parents. Meaning, that no matter the z-index provided, it cannot be stacked below that of its parent container.

    Thus, you have two options. You can either make it such that your tooltip outputs its html into an external container outside of the context of all of your provided hover containers.

    Or, you could simply make a javascript, which sets the z-index of all .pos-top.column_child elements in that section of your site, to 0, only making the z-index of the pos-top.column_child being hovered to 1.

    So something like this (using 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);

    Pasting this into the console of your website yeilds the result we'd expect. Try it for yourself.

    this should help with understanding stacking context:

    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/