web-dev-qa-db-fra.com

Comment placer une div à droite avec une position absolue

J'ai une page où une boîte de message dynamique doit être affichée sans déranger la page réelle. Cette boîte de message doit apparaître dans le coin supérieur droit de la page, recouvrant le contenu existant.

J'ai essayé d'utiliser position: absolute mais je ne parviens pas à le placer dans le coin droit. De plus, je ne peux pas utiliser left puisque je dois prendre en charge le responsive design à partir de Bootstrap.

Voici un exemple de balisage

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

Cette boîte de message doit avoir une largeur de 50% par rapport à .container et le côté gauche de la boîte de message ne doit pas être recouvert par celle-ci. c'est-à-dire que nous devrions pouvoir cliquer/sélectionner le contenu du côté gauche.

Veuillez trouver un exemple ici .

S'il vous plaît aidez-moi à résoudre ce problème.

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

le positionne dans le coin droit. Notez que la position dépend du premier élément ancêtre qui n'est pas positionné à static! 

MODIFIER:

J'ai mis à jour votre violon .

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

gauche: 100%; est la question importante ici!

33
Z. Rahman Raju

essaye ça:

gauche: calc (100% - [la largeur de votre div] px);

3
Yosef Tukachinsky

Vous pouvez utiliser " 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>
3
Alexander Ivashchenko

Je suppose que votre élément conteneur est probablement position:relative;. Cela signifie que la boîte de dialogue sera positionnée en fonction du conteneur, pas de la page.

Pouvez-vous changer le balisage à cela?

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

Avec la boîte de dialogue en dehors du conteneur principal, vous pouvez utiliser le positionnement absolu par rapport à la page.

1
Stephen Reid

Pouvez-vous essayer ce qui suit:

float: right;
1
KristofMols

Simple, utilisez le positionnement absolu, et au lieu de spécifier un haut et une gauche, spécifiez un haut et un droit!

Par exemple:

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