绝对定位的div无法识别父div

Question

我正在研究site的一个非常具体的问题。我在网站底部有一个JQuery动画温度计。如果您的浏览器尺寸小于温度计的高度，定位中的某些内容会使其在上方滚动位置：fixed;导航栏。您可以看到问题here, if your browser window is small.

这是我的温度计的CSS。

.thermo1 {
    position: relative;
}

.thermometer {
    float: left;
    position:relative;
    margin-left:460px;
    margin-top:-550px;
}
.thermometer {
    width:50px;
    height:550px;
    position: relative;
    background: #302720;
    border:0px solid #aaa;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.thermometer .track {
     height:530px;
     top:10px;
     width:40px;
     border: 1px solid #302720;
     -webkit-border-radius: 18px;
     -moz-border-radius: 18px;
     -ms-border-radius: 18px;
     -o-border-radius: 18px;
     border-radius: 18px;
     position: relative;
     margin:0 auto;
     background: rgb(255, 255, 255);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(94, 75, 62)), color-stop(1%, rgb(255, 255, 255)));
     background: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -o-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -ms-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -moz-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background-position: 0 -1px;
     background-size: 100% 5%;
}   
.thermometer .progress {
     height:0%;
     width:100%;
     border-bottom: 0px solid rgb(143, 24, 67);
     -webkit-border-radius: 8px;
     -moz-border-radius: 12px;
     -ms-border-radius: 12px;
     -o-border-radius: 12px;
     border-radius: 12px;
     background: rgb(143, 24, 67);
     background: rgba(143, 24, 67, 0.9);
     position: absolute;
     bottom:0;
     left:0;
}
.thermometer .goal {
     position:absolute;
     top:0;
}
.thermometer .amount {
     display: inline-block;
     padding:0 5px 0 50px;
     border-top:1px solid black;
     font-family: Trebuchet MS;
     font-weight: bold;
     color:#302720;
}
.thermometer .progress .amount {
     padding:0 50px 0 5px;
     position: absolute;
     border-top:1px solid #302720;
     color:#302720;
     right:0;
}

我的HTML

<div id="thermo1" class="thermometer">
    <div class="track">
        <div class="goal">
            <div class="amount">25000</div>
        </div>
        <div class="progress">
            <div class="amount">0</div>
        </div>
    </div>
</div>

如果你能对此有所了解，我将非常感激。谢谢！

Answer 1

为.single-page-nav添加更高的z-index，然后为站点中的其他元素添加。

.single-page-nav {
  z-index:100000;
}     

希望这有帮助。

Answer 2

问题在于您的保证金最高为-550px。将其更改为0px，效果很好。

.thermometer {
    float: left;
    position:relative;
    margin-left:460px;
    margin-top:-550px; //change this to 0px
}

http://jsfiddle.net/nFzPM/