css - バブルは常にページの前に

Question

バブルウィンドウのあるスライダーがあります。スライダーをスライドすると、バブル ウィンドウがスライダー ハンドラーの位置に従います。問題は、ヘッダーを表示するために使用される div がスライダーの上にあることです。そのため、スライドが発生すると、バブル ウィンドウがスライダーの上の div と重なり、スライダーの 1/3 部分が div の下に隠れます。z-index:100スライドが発生すると、バブルウィンドウが常に前面になるように使用しました。ただし、バブル ウィンドウはまだ div の下にあります。詳細については、画像を参照してください。何か考えはありますか？

バブルウィンドウコンテナ

.sliderAreaWithUnits { padding-left: 80px !important; padding-right:50px !important; padding-top: 30px !important; padding-bottom: 30px !important; position: relative;top: 0;left: 40;border-radius: 4px;}

バブルウィンドウCSS

.bubbleWindow {
    position: absolute;
    top: -20px;
    width: 80px;
    height: 50px; 
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding-top: 9px;
    background: transparent url('../Images/bubbleWithUnits.png') no-repeat ;
    display: none;
    z-index: 100;
}

ヘッダーCSS

#headerTitle, .headerTitle {
    margin:0;
    color:@primary-text-color;
    padding:3;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
}
.trigger #headerTitle {
    background:url('../../content/images/toggleArrowUp.png') no-repeat right;
    margin:0;
    height: 24px;
    padding:0 0 0 10px;
    font:bold 12px/24px Arial, Sans-Serif;
    color:@primary-text-color;
    text-decoration:none;
}