CSS absolute Positionsausrichtung

Question

Ich habe ein Login-Formular auf meiner Website, die angezeigt wird, wenn ein Benutzer auf eine Schaltfläche klickt. Es ist ein div, die über andere Inhalte schwimmt. Es dauert nur einen kleinen Teil der Seite (direkt unter dem Zeichen in Verbindung) auf.

Alles in Ordnung bis auf eine kleine Sache funktioniert. Es zeigt in Verbindung auf der linken Seite des Zeichens ausgerichtet (i ein Diagramm unten versucht).

  

| Anmelden |

     

| Zeichen in Sachen hier |

Ich mag es tatsächlich so aussieht (rechts von dem Zeichen in Verbindung ausrichten):

  

| Zeichen   in |

     

| Zeichen in Sachen hier |

Das ist mein 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>

Und die CSS für das Zeichen in Feld:

  

signinbox {background-color: # C1DEEE;     padding: 10px; z-Index: 1; Position:   absolut; top: 66px; }

Ist es möglich, dies in nur CSS zu tun?

Danke

Answer 1

Wickeln Sie die signin Informationen in einem anderen div und nennt es inner signin dann die relative Position zum absoluten positionierter outter div. Sie können auch die Breite auf der absoluten positionierter outter div setzen müssen.

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; 
}

Wenn das nicht funktioniert, warum nicht nur eine „linke“ Eigenschaft auf die signingbox fügen Sie die horizontale Position zu setzen sowie die Vertikale. Gibt es einen Grund, warum Sie nicht, kann nicht absolute Position das Element mit x und y?

Answer 2

Ich glaube, Sie wollen folgendes versuchen

float: right

oder

text-align: right

Answer 3

Setzen Sie das Anmelde in Sachen innerhalb des div die Anmeldeschaltfläche enthält.

Machen Sie die Behälterposition: rel.

Dann geben Sie die Zeichen in Sachen position: absolute; und rechts:. 0;

Im Übrigen kümmern uns hier; lediglich erforderlich ist Javascript eingeloggt ist ziemlich unhöflich. Viele Menschen NoScript für eine Vielzahl von Gründen ausgeführt werden.

Answer 4

Ich habe neue div erstellt mit Klasse „Hauptfenster“. Sie können die Position von „signinbox“ einzustellen. von der CSS durch den Wert von „rechts“ und „oben“ zu ändern.

<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;  
}

Danke, Arun Krishnan