overflow overflow: nascosto con z-index

Sto usando il plugin jquery coda_bubble, e ho bisogno di far saltare la mia bolla all'interno di un div nascosto overflow. ecco il mio codice di esempio.overflow overflow: nascosto con z-index

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    width:120px; 
    height:80px; 
    overflow:hidden; 
    float:left; 
    } 
.coda_bubble{ 
    z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="overflow"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
    <div class="overflow" style="overflow: visible;"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

fonte

2009-12-23 mukamaivan

Suppongo che non è necessario .coda_bubble di essere un figlio di .overflow. In caso contrario, spostalo e crea un div di posizionamento per tenere entrambi i bambini.

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    overflow:hidden; 
    width:120px; 
    height:80px; 
    position:absolute; /*May not be needed.*/ 
    } 
.position { 
    width:120px; 
    height:80px; 
    float:left; 
} 
.coda_bubble{ 
    /*z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="position"> 
     <div class="overflow"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 

    <div class="position"> 
     <div class="overflow" style="overflow:"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

fonte

2010-01-06 03:11:21 Byran

Grazie Byran, l'idea è fantastica, lascia che ci provi. – mukamaivan

La proprietà z-index vale per quegli elementi aventi posizione impostata assoluta. Prova questo css invece:

.coda_bubble{ 
    position:absolute; 
    z-index:100;/****NOT WORKING*******/ 
}

fonte

2009-12-23 12:15:35 Sarfraz

Thanx Sharfraz, ma la bolla è ancora nascosta. . Overflow { larghezza: 120 px; altezza: 80 px; overflow: nascosto; galleggiante: a sinistra; \t posizione: relativa; } .coda_bubble { posizione: assoluta; z-index: 100;/**** NON FUNZIONANTE *******/ } – mukamaivan

rimuovere la classe .overflow dall'elemento per verificare cosa succede. – Sarfraz

Questo funziona davvero ma ha uno scopo, quindi ne ho bisogno lì. – mukamaivan

Non è possibile. overflow: nascosto; Nasconde il contenuto all'esterno dell'elemento. Periodo.

z-index si applica a elementi assoluti AND relativamente posizionati, solo in modo diverso, nonostante ciò che qualcun altro ha detto.

MODIFICA Si può mettere un po 'di padding su quel particolare div, se si può vivere con quel padding, cioè. Il div avrebbe bisogno di essere un po 'più ampio, anche.

EDIT 2 Come altri hanno affermato, sebbene posizione: relativa; e posizione: assoluta; sono probabilmente più comuni, sì, z-index funziona con position: fixed; anche, non solo per posizione: statico; Ho trascurato quelli.

fonte

2010-01-12 18:17:47

Il z-index proprietà SOLO lavoro in elementi che hanno position opzione impostata su absolute o relative.

In altre parole è SEMPRE necessario positon per lavorare con z-index.

fonte

2011-02-08 18:39:51 Username

Vorrei calcolare la posizione di offset dalla finestra, rimuoverla dal suo genitore e collegarla al corpo.

Esempio:

var left, top; 
left = jQuery(element).offset().left; 
top = jQuery(element).offset().top; 
jQuery(element) 
    .appendTo('body') 
    .css({ 
    'position': 'absolute', 
    'left': left + 'px', 
    'top': top + 'px' 
    });

fonte

2011-04-07 14:08:46

solo una correzione: z-index vale per position: relative, position:absolute E position:fixed. Per rispondere alla domanda originale: non è possibile in alcun modo che nei CSS un elemento figlio di un elemento overflow: hidden mostri i suoi contenuti al di fuori dei confini parentali, è necessario modificare la gerarchia.

fonte

2011-05-24 15:25:28 mystrdat

Sarebbe molto meglio se fosse possibile che i bambini sovrascrivano alcune delle impostazioni del forfather, solo per loro stessi. Quindi alcuni dei figli di un div overflow-hidden potrebbero essere visibili (come le sfumature di elementi al suo interno), ma il resto rimarrebbe così com'è. Questa restrizione costringe letteralmente gli sviluppatori a trasformare la loro soluzione in un hack. –

La gerarchia di HTML e CSS costringe molti di questi antipattern, ci vuole una grande esperienza per realizzare layout complicati in modo ottimale. – mystrdat

overflow overflow: nascosto con z-index

risposta

Problemi correlati