5

jsfiddleでこれを再現するのはかなり難しいので、先に進んでスクリーンショット、HTML、CSSを貼り付けます。

ここに画像の説明を入力してください

上の画像のドロップダウンの表示に問題があります。

HTMLとCSS：

<div class="row-fluid profile-gallery-image-container">
    <div class="span12">

        <a href="#"><img src="#"/></a>

        <div class="image-options">

            <div class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog icon-white"></i></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0);">test</a></li>
                </ul>
            </div>

        </div>

        <div class="delete-image">
            <a href="javascript:void(0);"/></a>
        </div>
    </div>
</div>


.profile-gallery-image-container {
max-width: 130px;
max-height: 110px;
margin-bottom: 0px;
display: inline-block;
position: relative;
border: 2px solid rgba(140,140,140,1);
z-index: 0;
}

.image-options {
float: right;
top: 0px;
right: 0px;
position: absolute;
padding-top: 2px;
border-left: 2px solid rgba(255,128,64,1);
border-bottom: 2px solid rgba(255,128,64,1);
width: 15px;
height: 15px;
}

私は何が間違っているのですか？

4

1 に答える 1

9

これは、z-indexレベルに関係している可能性があり、またはオーバーフロー設定である可能性があります。

親コンテナを「overflow：visible;」に設定します。スタートになりますが、それから私は位置を見ていきます：メニューCSSの相対的なもの-それはしばしば問題を助けます。

しかし、最終的には、動作するデモを見ずにそれを理解することはできません。

于 2012-11-12T17:19:47.447 に答える