html - posicionamiento - Cómo colocar un div en el lado derecho con posición absoluta
posicionar div css (7)
¿Puedes probar lo siguiente?
float: right;
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 el contenido existente.
He intentado usar la position: absolute pero luego no puedo colocarla en la esquina derecha. Tampoco puedo usar la left porque tengo que admitir el diseño responsivo de Bootstrap.
Aquí hay una muestra de marcado
<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 debe tener un ancho del 50% con respecto al .container y el lado izquierdo del cuadro de mensaje no debe superponerse. Es decir, deberíamos poder hacer clic / seleccionar los contenidos del lado izquierdo.
Por favor encuentre una muestra here .
Por favor ayúdame a resolver este problema.
Puedes usar " 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>
Simple, use el posicionamiento absoluto, y en lugar de especificar una parte superior e izquierda, especifique una parte superior y una derecha!
Por ejemplo:
#logo_image {
width:80px;
height:80px;
top:10px;
right:10px;
z-index: 3;
position:absolute;
}
Supongo que su elemento contenedor es probablemente position:relative; . Esto significa que el cuadro de diálogo se posicionará de acuerdo con el contenedor, no con la página.
¿Puedes 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 la posición absoluta en relación con la página.
prueba esto:
izquierda: calc (100% - [el ancho de tu div] px);
yourbox {
position: absolute;
left: 100%;
top: 0;
}
izquierda: 100%; ¡Es el tema importante aquí!
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-antepasado que no está en posición static .
EDITAR: