z-index funktioniert nicht - Element durch seinen Container eingeschränkt

Question

Ich erstelle einen einfachen Tool Tipp mit CSS. Dies ist mein Code in einer Funktion enthalten:

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

und das ist mein 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;} 

Die Spitze funktioniert gut ... wenn i.tipster schwebte wird span.tip wie erwartet erscheint. Jedoch ist das Problem, wenn, wenn der Gehalt an span.tip umfangreich ist span.tip wird durch die Höhe des Behälters p.tipster-wrap wie gezeigt, in diesem Bild abgeschnitten:

Hinzufügen einen unteren z-Index zu p.tipster-wrap nicht lösen das Problem und schafft eine zusätzliche Ausgabe von i.tip unter der nächsten Formulareingabe als zeigt in diesem Bild erscheinen:

Wenn ich Linie Bremse p.tipster-wrap hinzufügen die gesamten i.tip macht richtig aber fügt unnötigen und unerwünschten Raum wie in diesem Bild gezeigt:

Ist es möglich, dieses Problem mit reinem CSS zu lösen oder ist jquery erforderlich und wenn ja, wie würde ich darüber gehen. Vielen Dank im Voraus für Ihre Hilfe.

Fiddle Here Das Problem tritt jedoch nicht in der Geige auf.

Answer 1

Dies wird durch einen Container verursacht, in dem der obige Code in der Frage mit einer visibility:hidden Einstellung enthalten war. Unten ist der gesamte Code mit diesem Problem:

CSS

.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

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

Der Täter .rowoverflow:hidden mit wurde.

Während ich nicht sicher bin, was ich tun werde, um mein Problem zu lösen, wie .row muss visibility:hidden haben, war das, was mich verwirrt ... zumindest eine solide Fehlersuche Lektion gelernt wurde.

Nochmals vielen Dank für die Hilfe Jungs ...