Cómo colocar un div en el lado derecho con la posición absoluta

Tengo una página donde se debe mostrar un cuadro de mensaje dinámico sin molestar a la página real. Este cuadro de mensaje debe aparecer en la esquina superior derecha de la página superponiendo los contenidos existentes.Cómo colocar un div en el lado derecho con la posición absoluta

He intentado usar position: absolute pero no puedo colocarlo en la esquina derecha. Además, no puedo usar left ya que tengo que admitir el diseño receptivo de Bootstrap.

Aquí es un margen de beneficio muestra

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

Este cuadro de mensaje debería tener una anchura de 50% con respecto a la .container y el lado izquierdo del cuadro de mensaje no debe ser solapada por él. es decir, deberíamos poder hacer clic/seleccionar el contenido del lado izquierdo.

Encontrará una muestra here.

Ayúdame a solucionar este problema.

Fuente

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

lo coloca en la esquina derecha. Tenga en cuenta que la posición depende del primer elemento ancestro que no está en posición static.

EDIT:

I updated your fiddle.

Fuente

2012-03-16 10:26:44 Christoph

Se puede tratar lo siguiente:

float: right;

Fuente

2012-03-16 10:27:39 Molske

Estoy asumiendo que su elemento contenedor es probablemente position:relative;. Esto significa que el cuadro de diálogo se colocará de acuerdo con el contenedor, no la página.

¿Se puede cambiar el marcado a esto?

<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 el cuadro de diálogo fuera del contenedor principal, puede utilizar el posicionamiento absoluto relativo a la página.

Fuente

2012-03-16 10:34:24

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

izquierda: 100%; es el tema importante aquí!

Fuente

2013-12-15 10:55:45

'izquierda : 100% 'pone el borde IZQUIERDO del div en el extremo derecho de la ventana, por lo que el resto del Div está oculto. 'left: 94%' funcionó para mí. Gran solución, gracias. – gibberish

puede utilizar "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>

Fuente

2016-04-15 16:50:22

Cómo colocar un div en el lado derecho con la posición absoluta

Respuesta

Cuestiones relacionadas