-1

私が抱えている問題を示すために、私の例をチェックしてください：

http://jsfiddle.net/zWkse/

#mymenu {
    float: left;
    z-index: 59;
    width: 60px;
    background: #000;
    color: #FFF;
}

#myleftcontent {
    width:100px;
    background-color:#fff;
    padding:7px;
    border: 1px solid #d3d3d3;
    float:left;
    padding-bottom: 7px;
    margin-bottom:20px;
}

#myrightcontent {
    float:right;
    width: 100px;
}

私の Web ページでは、左側にメイン コンテンツがあり、右側にメモがあります (左右のdiv要素) 。

どちらも または のいずれfloat: leftかrightです。

トップメニューのアンカーリンクをクリックするとロールダウンするドロップダウンメニューがあります。このメニューは、例では「mymenu」です。

メニューも ですがfloat: left、既存の要素の上に浮かんでほしいです。

#mymenuが浮かんでいるように#myleftcontent

どうすればそれができますか？

4

4 に答える 4

1

あなたが投稿していないyの部分は、そこからドロップダウンしたものです。その要素は positionend である必要があるため#mymenu、フローから i を取り出して z-index がその効果を発揮できるように、 を絶対に配置できます: http://jsfiddle.net/4hGnL/

<div id="menu-container">
    <div id="mymenu">
        MY MENU<br />
        MY MENU
    </div>
</div>
<div id="myleftcontent">
    i gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massagei gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massage
</div>
<div id="myrightcontent">
    i gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massagei gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massage
</div>

CSSで：

#menu-container {
    position: relative;
}
#mymenu {
    float: left;
    z-index: 59;
    width: 60px;
    background: #000;
    color: #FFF;
    position: absolute;
}
#myleftcontent {
    width:100px;
    background-color:#fff;
    padding:7px;
    border: 1px solid #d3d3d3;
    float:left;
    padding-bottom: 7px;
    margin-bottom:20px;
}
#myrightcontent {
    float:right;
    width: 100px;
}
于 2013-03-10T23:57:50.110 に答える
1

メニューに実行させたいのは、フロートではなく、実際には絶対位置です。これにより、メニューがドキュメント フローの外に移動します。

position:absolute;
z-index:1;

Z-index は、要素が配置される「レイヤー」を決定します。技術的には、すべての静的要素と相対要素がデフォルトでレイヤー 0 にあると想定できます。

HTML 構造に関しては、多少の計画が必要になることに注意してください。絶対要素は、そのコンテナに対して相対的に配置されます。したがって、相対位置の div にある場合、上と左の 0 ポイントはそのコンテナーの端にあります。それ以外の場合は、ウィンドウで絶対になるまでチェーンを上っていきます。

この新しいスタイルの変更であなたのフィドルを更新しましたhttp://jsfiddle.net/zWkse/4/

于 2013-03-11T00:01:20.260 に答える
0

に追加clear: left;する#myleftcontentと下に移動します#mymenu。

編集：「以上」が上記を意味するという仮定で答えました。それがあなたが意図したものではない場合は申し訳ありません！

于 2013-03-10T23:58:51.680 に答える
0

メニューをフローティングしてもよろしいですか? あなたは絶対配置で正しい軌道に乗っていると思いますが、それをmyleftcontent divの子として行い、適切に与えます:

左: 0; トップ: 0;

型パラメータ (またはいくつかのパディング付き)。そして (前述のように) このメニューにはより高い z-index が必要です。

もちろん、myleftcontent は絶対位置に配置する必要はありません。

参照: http://www.w3schools.com/css/css_positioning.asp

于 2013-06-16T00:40:26.713 に答える