CSS絶対位置合わせ

Question

私は、ユーザーがボタンをクリックしたときに表示されるウェブサイト上のログインフォームを持っています。これは、他のコンテンツの上に浮かぶdiv要素です。それだけで（直接リンクにおける記号の下）ページのごく一部を占めるます。

それはすべて一つの小さなものから離れて正常に動作します。それはリンクにおける記号の左に整列ディスプレイ（iは以下の図を試みた）。

  

|サインイン|

     

|ここのもので記号|

私は実際にそれが（リンク内の記号の右側に揃える）このように見てみたいです

  

|看板   で|

     

|ここのもので記号|

これは私のHTMLです：

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

また、ボックス内の記号のためのCSSます：

  

signinbox {背景色：＃1 C1DEEE。     パディング：10pxの; Zインデックス：1。ポジション：   絶対の;トップ：66px; }

ただCSSでこれを行うには、それは可能ですか？

おかげ

Answer 1

別のDIV内のサインイン情報をラップし、絶対配置outterのDIVに対する相対位置こと次いで内部サインインを呼び出します。また、絶対位置outterのdiv要素に幅を設定する必要があります。

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

問題が解決しない場合は、その理由だけでだけでなく垂直方向として水平方向の位置を設定するsigningboxに「左」プロパティを追加しません。あなたは、xとyを持つ要素の絶対位置することはできませんしていない理由はありますか？

Answer 2

私は

あなたは試してみたいかもしれないと思います

フロート：右

または

テキスト整列：右

Answer 3

ログインボタンを含むdivの内側にサインインのものを入れています。

コンテナの位置行います。相対を

次にサインインスタッフ位置を与える：絶対。そして右：0;

なお、ここで世話をします。単にログインするためにJavascriptを必要とすることはかなり失礼です。多くの人々がさまざまな理由でNoScriptのを実行します。

Answer 4

私は、クラス「メイン・ペイン」で新しいdiv要素を作成しました。あなたは「signinbox」の位置を調整することができます。 「右」と「トップ」の値を変更することで、CSSから。

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}

おかげで、 アルン・クリシュナン