2

私はHTML構造を持っています

<div class="PapaDiv">
  <input type="checkbox"/>
  <label></label>
  <div class="ChildDiv">
    <input type="radio"/><label></label>
    <input type="radio"/><label></label>
    <input type="radio"/><label></label>
  </div>
  <br/>
</div>

この動物は、データに応じてサーバー側で動的に構築されています。これは、ネストされたメニューのようなものです。ユーザーがラベル付きのチェックボックスにマウスオーバーすると、ChildDiv がその横に表示されます。PapaDiv にはoverflow-y:auto最大の高さが定義されています。

そのため、チェックボックスがたくさんある場合、PapaDiv は垂直スクロール バーを取得します。これは望ましい動作です。ここで、下のチェックボックスにマウスを合わせると、その ChildDiv も PapaDiv 内に表示されます ( overflow-y:auto)。そして、ビジネスは、私が設定しなければならない PapaDiv の上に表示することを望んでいますoverflow-y:visible。

ここがジレンマです。両方の動作を組み合わせる必要があります。ChildDiv が PapaDiv の外に表示されると同時に、他の子がたくさんある場合はスクロールバーが表示された状態で表示される必要があります。これに対する解決策はありますか？

編集:これはあまり役に立たないと思いますが、CSS は次のとおりです。

.ChildDiv{
    background-color: #EDF1F9;
    border: 1px solid #557AB5;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    position: absolute;
}

.PapaDiv{
    background-color: #FFFFFF;
    border: 1px solid #557AB5;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5em;
    position: absolute;
    top: 0;
    width: 98%;
    z-index: 501;
}

PapaDiv's parent div {
    position: relative;
    width: 100%;
}

編集: 何も表示されない理由はdisplay:none、CSS に があるためです。JavaScript が関係しています。これらの要素では、チェックボックスまたはそのラベルにマウスオーバーすると、ChildDiv が表示されます ( jQuery $('.ChildDiv').show())。

ChildDiv または PapaDiv からのマウスアウト時: $('.ChildDiv').hide(). また、ChildDiv の "top" および "left" プロパティを設定するための簡単な計算が含まれているため、チェックボックスの横に表示されます。ChildDiv は既に で定義されていposition:absolute;ます。

4

1 に答える 1

0

私もDimskiyの前に同じ問題を抱えていました。マウスが画像の上に置かれたときに画像の上に表示される虫眼鏡を作成しようとしていました。この場合、親 div は#PapaDiv相対的に配置する必要があり、この場合#ChildDivは子 div を絶対的に配置する必要があることがわかりました。

の親が#PapaDiv相対的に配置されている場所はわかりますが、思い出すと、子要素の直接の親を相対的に配置する必要がありました。

これを試して：

#PapaDiv {
    position: relative;
}
#ChildDiv {
    position: absolute;
}

もちろん、他のすべての追加 CSS をそこに追加することもできます。

以下のリンクは、私が助けてくれた投稿です:
How to overlay one div over another div

于 2012-09-18T16:36:30.730 に答える