0

好的，我在 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”。它必须留在“包装”内。

这是“包装器”和“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 的底部？

我尝试代替"top: -30px"，而是使用："bottom: +200px"但随后“包装器” div 的大小也有所不同。

4

1 回答 1

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;
}

见小提琴：http: //jsfiddle.net/bozdoz/kgLNy/2/

于 2013-09-07T05:42:36.383 回答