Jak umieścić div po prawej stronie z absolutną pozycją

Mam stronę, na której dynamiczne okno wiadomości musi być wyświetlane bez zakłócania rzeczywistej strony. To okno wiadomości musi pojawić się w prawym górnym rogu strony nakładającej istniejącą zawartość.

Próbowałem użyć position: absolute, ale nie jestem w stanie umieścić go w prawym rogu. Nie mogę również użyć left, ponieważ muszę obsługiwać responsywny projekt z Bootstrap.

Oto przykładowy znacznik 

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

To okno wiadomości powinno mieć szerokość 50% w odniesieniu do .container i lewa strona okna wiadomości nie powinna być przez niego nakładana. czyli powinniśmy być w stanie kliknąć/wybrać zawartość lewej strony.

Proszę znaleźć próbkę tutaj .

Proszę, pomóż mi rozwiązać ten problem.
Author: user2771704, 2012-03-16
Source

7 answers

yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

Ustawia go w prawym rogu. Zauważ, że pozycja jest zależna od pierwszego elementu-przodka, który nie jest static pozycjonowany!

EDIT:

Zaktualizowałem Twoje skrzypce .

 62
Author: Christoph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-16 10:35:12 
yourbox {
   position: absolute;
   left: 100%;
   top: 0;
}

Lewa:100%; jest tu ważna sprawa!

 47
Author: Z. Rahman Raju,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-24 10:16:29

W prawym górnym rogu spróbuj tego: 

position: absolute;
top: 0;
right: 0;
 16
Author: Yosef Tukachinsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-20 12:39:45

Możesz użyć " translateX " 

<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>
 4
Author: Alexander Ivashchenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-15 16:50:22

Proste, użyj absolutnego pozycjonowania, i zamiast określać górę i lewo, określ górę i prawo!

Na przykład: 

#logo_image {
    width:80px;
    height:80px;
    top:10px;
    right:10px;
    z-index: 3;
    position:absolute;
}
 2
Author: n8glenn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-03 20:08:20

Możesz spróbować: 

float: right;
 1
Author: KristofMols,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-16 10:27:39

Zakładam, że Twoim elementem kontenera jest prawdopodobnie position:relative;. Oznacza to, że okno dialogowe zostanie umieszczone odpowiednio do kontenera, a nie Strony.

Możesz zmienić znaczniki na to? 
<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>

W oknie dialogowym poza głównym kontenerem można użyć bezwzględnego pozycjonowania względem strony.

 1
Author: Stephen Reid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-16 10:34:24