2012-01-14 8 views
3

私は以下のようにサインインボタンを持っていますが、私がスライダーの下に表示されているASP.Netログインコントロールを持っているメニューが開きます私はそれをスライダの上に配置したいと思います。スライダとサインインボタンの間にメニューバーがあります。CSSを使用して他のdivの上に1つのdivを配置します

どうすればいいですか?

enter image description here

私はSO上でこのquestionを踏襲しているが、これは私のCSSで

を成功しませんでした:

#container { 
    width:780px; 
    margin:0 auto; 
    position: relative; 
} 
#topnavsignin { 
    padding:10px 0px 12px; 
    font-size:11px; 
    line-height:23px; 
    text-align:right; 
    margin-top:-60px; 
    margin-left:120px; 
} 
#topnavsignin a.signin { 
    background:#88bbd4; 
    padding:4px 6px 6px; 
    text-decoration:none; 
    font-weight:bold; 
    color:#fff; 
    -webkit-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px; 
    *background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0; 
    *padding:4px 12px 6px; 
    margin-left:420px; 

} 
#signin_menu { 
    -moz-border-radius-topleft:5px; 
    -moz-border-radius-bottomleft:5px; 
    -moz-border-radius-bottomright:5px; 
    -webkit-border-top-left-radius:5px; 
    -webkit-border-bottom-left-radius:5px; 
    -webkit-border-bottom-right-radius:5px; 
    display:none; 
    background-color:#ddeef6; 
    position:absolute; 
    width:350px; 
    z-index:100; 
    border:1px transparent; 
    text-align:left; 
    top: 24.5px; 
    right: 171px; 
    margin-top:-55px; 
    margin-right: 0px; 
    *margin-right: -1px; 
    color:#789; 
    font-size:11px; 
    padding: 5px; 

} 

これは私がそれを示しています方法です:

<div id="container"> 
    <fieldset id="signin_menu"> 
    //Asp.Net Login Control 
    </fieldset> 
</div> 

//私のナビゲーションメニューに行く

これはあなたがいくつかの例一緒position: absolute or relative or fixed

で、CSSのz-indexを使用する他の上の1事業部を配置するには、私のスライダ部

<div id="slider_wrap"> 
      <div id="wowslider-container1"> 
      </div> 
</div> 

答えて

9

です:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

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

フロントになりたいコンテナには、背中にいたいコンテナよりも大きいz-インデックスを設定します。

z-indexposition: absolute, relative, or fixedでのみ動作し、制御したいdivにはこの属性があります。 あなたが言及している例では、この属性の1つ(またはZ-インデックスを使用しない)を除いてdiv32の順序を修正しようとします。つまり、のように、例ではZ-インデックスを使用できず、 z-indexを有効にしないで他の

私はあなたがそれらのどちらかにインデックスを設定していないことを見ています。

+1

@アリストス - それはあなたのリンクのために完全にうまく働いた.Zインデックスはガッドアイディアです:) – coder

1

フロントにしたいコンテナには、背面にあるコンテナよりも大きいz-indexを設定します。

注:z-indexは、同じ要素上のposition: absolute/relative/fixed;でのみ動作します。あなたが言及している例では、これらのプロパティの1つを持たないdivの順序を修正しようとします(またはz-indexを使用しないでください)。 z-indexpositionを一緒に定義することなく、1つの要素を他の要素の手前に配置することはできません。

関連する問題