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

【问题标题】：Absolutely positioned div is not recognizing parent div绝对定位的 div 无法识别父 div
【发布时间】：2014-01-01 12:30:20
【问题描述】：

我正在处理的site 有一个非常具体的问题。我在网站底部有一个 JQuery 动画温度计。如果您的浏览器尺寸小于温度计的高度，则定位中的某些内容会导致它滚动 position: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>

如果您能对此有所了解，我将不胜感激。谢谢！

【问题讨论】：

标签： html css positioning

【解决方案1】：

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

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

希望这会有所帮助。

【讨论】：

z-index 是一个很好的解决方案，但我很好奇为什么温度计“隐式”被提升到.single-page-nav div 之上......我不认为这是边距。无论如何，我投票支持你的答案，因为这就是我会做的:-)
编辑：我相信这个问题是由于相对定位——stackoverflow.com/questions/8986071/…
谢谢。 :D 效果很好。

【解决方案2】：

问题在于您的边距顶部为 -550 像素。将其更改为 0px，效果很好。

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

http://jsfiddle.net/nFzPM/

【讨论】：