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”的最底部放在“包装器” div的顶部。 我不能在包装器外写“help_box”。它必须留在“包装”中。

以下是“包装”的CSS和“help_box”：

.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”具有不同的高度。因此，虽然盒子在顶部并且在一行内看起来很漂亮，但如果它有2+行，它会在“包装器”内重叠。因此，在我的CSS中，“top”声明仅控制“help_box” div的顶部。我怎样才能控制这个div的BOTTOM？

我试过而不是“top：-30px”，我用过：“bottom：+ 200px”但是“包装” 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;
}

请参阅小提琴：http://jsfiddle.net/bozdoz/kgLNy/2/

CSS定位：框底部右侧框有隐藏溢出

1 个答案: