Come posizionare un div sul lato destro con posizione assoluta

Ho una pagina in cui è necessario visualizzare una finestra di messaggio dinamica senza disturbare la pagina effettiva. Questa finestra di messaggio deve apparire nell'angolo in alto a destra della pagina che si sovrappone ai contenuti esistenti.Come posizionare un div sul lato destro con posizione assoluta

Ho provato a utilizzare position: absolute ma non riesco a posizionarlo nell'angolo destro. Inoltre, non sono in grado di utilizzare left poiché devo supportare la progettazione reattiva da Bootstrap.

Ecco un markup campione

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

questa finestra di messaggio deve avere una larghezza di 50% rispetto al .container e il lato sinistro della finestra di messaggio non dovrebbe essere sovrapposti da esso. cioè dovremmo essere in grado di fare clic/selezionare il contenuto del lato sinistro.

Si prega di trovare un campione here.

Please help me per risolvere questo problema.

fonte

2012-03-16 Arun P Johny

http://stackoverflow.com/questions/11333624/css-float-right-and-position-absolute-doesnt-work-together – Nick

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

posizionarlo nell'angolo destro. Si noti che la posizione dipende dal primo elemento antenato che non è posizionato su static!

EDIT:

I updated your fiddle.

fonte

2012-03-16 10:26:44 Christoph

Potete provare la seguente:

float: right;

fonte

2012-03-16 10:27:39 Molske

sto supponendo che il vostro elemento contenitore è probabilmente position:relative;. Ciò significa che la finestra di dialogo verrà posizionata in base al contenitore, non alla pagina.

È possibile modificare il codice a questo?

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

Con la finestra di dialogo all'esterno del contenitore principale, è possibile utilizzare il posizionamento assoluto relativo alla pagina.

fonte

2012-03-16 10:34:24

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

sinistra: 100%; è il problema importante qui!

fonte

2013-12-15 10:55:45

'sinistra : 100% 'colloca il lato SINISTRO del div all'estremità destra della finestra, quindi il resto del div è nascosto. 'left: 94%' ha funzionato per me. Ottima soluzione, grazie. – gibberish

è possibile utilizzare "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>

fonte

2016-04-15 16:50:22

Come posizionare un div sul lato destro con posizione assoluta

risposta

Problemi correlati