1

私は以下を作成しました

http://jsfiddle.net/fcW66/1/

CSS

.div_wrapper {
    float: left;
    width: 100px;
    background: 3333;
    margin: 15px;
    background: #cacaca;
    z-index: 1;
}
.div_two {
    display: none;
    height: 120px;
    background: #444;
    z-index: 999;
}
.div_one:hover .div_two {
    display: block;
}

HTML

<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>

カーソルを合わせると説明が表示されますが、他の div がさらに押し出されます。div_wrapper に固定幅を与えてみましたが、これで問題は解決しましたが、div2 が表示されると、その下にある次の div の下に表示されます。z-index を追加してみましたが、何も変わりませんでした。div_two がその下にある div の上に表示され、レイアウトを変更しないようにする必要があります。

4

4 に答える 4

3

ホバーする前にオブジェクトの位置に空白が必要な場合はvisibility、 ではなくを使用しますdisplay。

visibility:hidden、 それ以外のdisplay:none

とvisibility:visible、代わりにdislpay:block

于 2013-08-22T21:00:20.260 に答える
3

position: absoluteこれを配置するために使用する必要がありますdiv。絶対配置された要素は、コンテナ内のスペースを占有せず、他の要素を押し出すことを防ぎます。

このようなほとんどの場合、position: relativeドキュメント全体ではなく親に対して絶対要素を配置できるように、親要素も同様に設定する必要があります。

http://jsfiddle.net/fcW66/7/

.div_one{
    position: relative;
}

.div_two {
    /* ... */
    position: absolute;
    width: 100%;
}
于 2013-08-22T20:57:47.307 に答える
0

これを実現するために使用できますposition: absolute;。

ここにフィドルがありますhttp://jsfiddle.net/QbAzY/

于 2013-08-22T21:01:04.020 に答える