z-indexが機能していない - 要素がそのコンテナによって制限されています

Question

CSSを使用して簡単なツールチップを作成しています。これは、関数内に含まれて私のコードです：

function textInput($name,$label,$info,$place,$val){ 
    echo '<p class="tipster-wrap">'; 
    echo '<i class="fa fa-info-circle tipster"></i> '; 
    echo '<span class="tip">'.$info.'</span>'; 
    echo '<label for="'.$name.'">'.$label.'</label>'; 
    echo '<input type="text" id="'.$name.'" name="'.$name.'" value="'.$val.'" placeholder="'.$place.'">'; 
    echo '</p>'; 
} 

、これは私のCSSです：

.tipster-wrap{ 
     position: relative; 
     overflow:visible; 
    } 

    .tip {'; 
    width:600px; 
    padding:4px 10px; 
    border:1px solid #999; 
    box-shadow: 0 0 3px rgba(0,0,0,.3); 
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3); 
    border-radius:3px; 
    -webkit-border-radius:3px; 
    position:absolute; 
    top:0; 
    left:17px; 
    display:none; 
    z-index:10002; 
    background-color: whitesmoke; 
    font-size: 12px; 
    }'; 


    .tipster { 
     display:inline-block; 
     width: 17px; 
     cursor:pointer; 
    } 

    .tipster:hover + .tip {display:block;} 
    .tip:hover {display:block;} 

予想通りi.tipsterがspan.tip表示されホバリングされたときに先端が...正常に動作します。

がp.tipster-wrapに低いZインデクスを追加解決しない。しかし、問題は、このイメージに示すようにspan.tipの含有量が広範囲である場合span.tip容器p.tipster-wrapの高さによって遮断されたときであります問題とは、このイメージでのショーとして次のフォーム入力の下に表示されてi.tipの追加の問題を作成します。

私はp.tipster-wrapにラインブレーキを追加した場合全体i.tipが正しくレンダリングが、この画像のように不必要、不要なスペースを追加します。

は、それは純粋なCSSでこの問題を解決することは可能ですかjqueryのに必要とどのように私はそれに行くかそうならばです。あなたの助けを前にありがとう。

フィドルHere フィディドで問題は発生していません。

Answer 1

これは、上記のコードがvisibility:hidden設定に含まれているコンテナによって発生します。

CSS犯人は.rowoverflow:hiddenを持った

<div class="button-wrap"><button class="update-button">Update Settings</button></div> 

    <ul class="accordion"> 


     <li class="accordion-item first-title"> 
      <div class="accordion-item-wrap first-title"> 
       <div class="accordion-title first-title"> 
       <i class="fa fa-arrow-circle-right"></i> Site Directory</div> 
       <div class="accordion-content hide"> 


      <div class="row"> 
       <div class="col_4 alpha"> 

        <p class="tipster-wrap"> 
         <i class="fa fa-info-circle tipster">X</i> 
         <span class="tip"><b>Directory Type</b><br>Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory.</span> 
         <label for="test">test label</label><br> 
         <input type="text" id="test" name="test" value="" placeholder=" place"> 
        </p> 

       </div> 

       <div class="col_4 alpha">    
        <p class="tipster-wrap"> 
         <i class="fa fa-info-circle tipster">X</i> 
         <span class="tip"><b>Directory Type</b><br>Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory.</span> 
         <label for="test">test label</label><br> 
         <input type="text" id="test" name="test" value="" placeholder=" place"> 
        </p>                
       </div> 
       <div class="col_4 omega"> 

       </div> 
      </div> 

       </div> 
      </div> 
     </li> 

     <li class="accordion-item"> 
      <div class="accordion-item-wrap"> 
       <div class="accordion-title"><i class="fa fa-arrow-circle-right"></i> Middle</div> 
       <div class="accordion-content hide">x'; 

       </div> 
      </div> 
     </li> 

     <li class="accordion-item last-title"> 
      <div class="accordion-item-wrap last-title"> 
       <div class="accordion-title is-last last-title"><i class="fa fa-arrow-circle-right"></i> Bottom</div> 
       <div class="accordion-content last-title hide">x'; 

       </div> 
      </div> 
     </li> 

    </ul> 

.row{ 
    display:block;'; 
    overflow:hidden;'; 
    clear:both;'; 
    } 


    *[class*="col_"].alpha{ 
    margin-left:0;'; 
    } 


    *[class*="col_"].omega{ 
    margin-right:0;'; 
    } 


    .col_1{width:6.6666666666667%;} 
    .col_2{width:15%;} 
    .col_3{width:23.333333333333%;} 
    .col_4{width:31.666666666667%;} 
    .col_5{width:40%;} 
    .col_6{width:48.333333333333%;} 
    .col_7{width:56.666666666667%;} 
    .col_8{width:65%;} 
    .col_9{width:73.333333333333%;} 
    .col_10{width:81.666666666667%;} 
    .col_11{width:90%;} 
    .col_12{width:98.333333333333%;} 

    .accordion-item-wrap{ 
    background-color: whitesmoke;'; 
    } 

    .accordion-title{ 
    border-bottom: 1px #999 solid;'; 
    padding: '.remCalc(8).';'; 
    } 

    .active-title{color: blue; font-weight: normal;} 


    .first-title{ 
    -webkit-border-radius: 6px 6px 0px 0px;'; 
    -moz-border-radius: 6px 6px 0px 0px;'; 
    border-radius: 6px 6px 0px 0px;'; 
    cursor:pointer;'; 
    } 

    .last-title{ 
    -webkit-border-radius: 0px 0px 6px 6px;'; 
    -moz-border-radius: 0px 0px 6px 6px;'; 
    border-radius: 0px 0px 6px 6px;'; 
    } 


    .accordion-content{ 
    background-color: white;'; 
    border-bottom: 1px solid #999;'; 
    padding: '.remCalc(15).';'; 
    } 

    .tipster-wrap{ 
     position: relative; 
     overflow:visible; 
    } 

    .tip {'; 
    width:600px; 
    padding:4px 10px; 
    border:1px solid #999; 
    box-shadow: 0 0 3px rgba(0,0,0,.3); 
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3); 
    border-radius:3px; 
    -webkit-border-radius:3px; 
    position:absolute; 
    top:0; 
    left:17px; 
    display:none; 
    z-index:10002; 
    background-color: whitesmoke; 
    font-size: 12px; 
    }'; 


    .tipster { 
     display:inline-block; 
     width: 17px; 
     cursor:pointer; 
    } 

    .tipster:hover + .tip {display:block;} 
    .tip:hover {display:block;} 

HTML：以下は、この問題に関する全体のコードがあります。

.rowにはvisibility:hiddenが必要なので、私は自分の問題を解決するために何をすべきか分かりませんが、これは私を混乱させるものでした。少なくとも、徹底的なトラブルシューティングのレッスンが学習されました。すべてのヘルプみんなのために再び

おかげで...