html - CSS 定位 : bottom of box right on top of box with hidden overflow

Question

好的，我在 HTML 中有这个:

<div class="wrapper">
    <div class="help_box">some text</div>
    <div id="unique_title">Some Title<div class="help">?</div>
</div>

我还有一个 JS，当鼠标悬停在 "?" 上时，"help_box" 变得可见。我想要的是将 "help_box" 的底部放在 "wrapper" div 的正上方。 我不能在包装外写“help_box”。它必须留在“包装器”内。

这是“wrapper” 和“help_box” 的 CSS:

.help_box {
    position: absolute;
    padding: 6px 5px;
    top: -30px;
    display: none;
    right: 5px;
    border-radius: 5px;
    color: rgb(51, 34, 170);
    border: 1px solid rgb(15, 27, 160);
    background-color: rgb(255, 255, 255);
    font-size: 12px;
    vertical-align: bottom;
}


.wrapper {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: #F9F9F9;
    border: 1px solid #D6D6D6;
    border-radius: 6px;
    font-size: 15px;
    margin: 0 0 20px;
    padding: 5px;
    float: none !important;
    width: auto !important;
    text-align: justify;
    position: relative;
}

一些“help_box” es有不同的高度。因此，虽然盒子在顶部并且在一行内看起来很漂亮，但如果它有 2+ 行，它会在 “包装器” 内重叠。所以在我的 CSS 中，"top" 声明只控制了我的 "help_box" div 的顶部。如何控制此 div 的底部？

我尝试使用 "bottom: +200px" 而不是 "top: -30px"，然后是 "wrapper" div 的大小也各不相同。

Answer 1

将help_box放在帮助类中，并添加相对于帮助类的位置；然后调整 bottom 属性，而不是 top:

#help_box {
    position: absolute;
    padding: 6px 5px;
    bottom: 42px;
    display: none;
    right: 5px;
    border-radius: 5px;
    color: rgb(51, 34, 170);
    border: 1px solid rgb(15, 27, 160);
    background-color: rgb(255, 255, 255);
    font-size: 12px;
    vertical-align: bottom;
}

.help {
    position:relative;
}
.help:hover #help_box {
  display:block;   
}

#wrapper {
    top:100px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: #F9F9F9;
    border: 1px solid #D6D6D6;
    border-radius: 6px;
    font-size: 15px;
    margin: 0 0 20px;
    padding: 5px;
    float: none !important;
    width: auto !important;
    text-align: justify;
    position: relative;
}

参见 fiddle :http://jsfiddle.net/bozdoz/kgLNy/2/