0

OK私は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」は高さが異なります。そのため、ボックスは 1 行内で上に配置されて美しく見えますが、2 行以上ある場合は「ラッパー」内で重なります。したがって、私の CSS では、「top」宣言は「help_box」 div の上部のみを制御しています。この div の BOTTOM を制御するにはどうすればよいですか?

"top: -30px"の代わりに試してみました: "bottom: +200px"を使用しましたが、"wrapper" 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 に答える