web-dev-qa-db-ger.com

Wie man ein div auf der rechten Seite mit absoluter Position platziert

Ich habe eine Seite, auf der ein dynamisches Meldungsfeld angezeigt werden muss, ohne die eigentliche Seite zu stören. Dieses Meldungsfeld muss in der oberen rechten Ecke der Seite erscheinen und den vorhandenen Inhalt überlappen.

Ich habe versucht, position: absolute zu verwenden, kann es jedoch nicht in der rechten Ecke platzieren. Ich kann auch left nicht verwenden, da ich Responsive Design von Bootstrap unterstützen muss.

Hier ist ein Beispiel für ein Markup

<html>
    <body>
        <div class="container">
            <!-- Need to place this div at the top right of the page-->
            <div class="ajax-message">
                <div class="row">
                    <div class="span9">
                        <div class="alert">
                            <a class="close icon icon-remove"></a>
                            <div class="message-content">
                                Some message goes here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page contents starts here. These are dynamic-->
            <div class="row">
                <div class="span12 inner-col">
                    <h2>Documents</h2>
                </div>
            </div>
        </div>
    </body>
</html>

Dieses Meldungsfeld sollte eine Breite von 50% in Bezug auf .container haben und die linke Seite des Meldungsfelds sollte sich nicht überlappen. dh wir sollten in der Lage sein, den Inhalt der linken Seite auszuwählen.

Hier finden Sie ein Muster hier .

Bitte helfen Sie mir, dieses Problem zu lösen.

28
Arun P Johny
yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

positioniert es in der rechten Ecke. Beachten Sie, dass die Position vom ersten Ancestor-Element abhängig ist, das nicht static positioniert ist! 

BEARBEITEN:

Ich habe deine Geige aktualisiert .

47
Christoph
yourbox {
   position: absolute;
   left: 100%;
   top: 0;
}

links: 100%; ist hier das wichtige Thema!

33
Z. Rahman Raju

versuche dies:

links: calc (100% - [die Breite Ihres div] px);

3

Sie können " translateX " verwenden.

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Ich gehe davon aus, dass Ihr Containerelement wahrscheinlich position:relative; ist. Dies bedeutet, dass das Dialogfeld entsprechend zum Container und nicht zur Seite positioniert wird.

Kannst du das Markup darauf ändern?

<html>
<body>
    <!-- Need to place this div at the top right of the page-->
        <div class="ajax-message">
            <div class="row">
                <div class="span9">
                    <div class="alert">
                        <a class="close icon icon-remove"></a>
                        <div class="message-content">
                            Some message goes here
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="container">
        <!-- Page contents starts here. These are dynamic-->
        <div class="row">
            <div class="span12 inner-col">
                <h2>Documents</h2>
            </div>
        </div>
    </div>
</body>
</html>

Wenn sich das Dialogfeld außerhalb des Hauptcontainers befindet, können Sie die absolute Positionierung relativ zur Seite verwenden.

1
Stephen Reid

Kannst du folgendes probieren:

float: right;
1
KristofMols

Verwenden Sie einfach die absolute Positionierung. Statt oben und links anzugeben, geben Sie oben und rechts ein!

Zum Beispiel:

#logo_image {
    width:80px;
    height:80px;
    top:10px;
    right:10px;
    z-index: 3;
    position:absolute;
}
0
n8glenn