Quiero mostrar un div que siempre es visible incluso cuando el usuario se desplaza por la página. He utilizado el CSS position: fixed; para que.

Ahora también quiero mostrar el div en la esquina de la mano derecha del padre div.

Traté de usar este código CSS para lograr el objetivo:

.test {
  position: fixed;
  text-align: right;
}

Pero no se alinea el elemento en el lado derecho.

Mi página de ejemplo se puede encontrar aquí, el div elemento que desee alinear se llama test en virtud de la clase de padre parent.

Hay alguna CSS o JavaScript solución para la alineación de la posición fija de los elementos del lado derecho de la pantalla?

  • intente float : right en su clase
  • Así que usted quiere que la palabra «Otra Prueba» para aparecer en la esquina superior derecha de la casilla gris y para el cuadro gris a permanecer en su lugar cuando el usuario se desplaza?
  • no el div «prueba» con el texto Otra Prueba para estar alineado a la derecha para el div padre que es «padre» y el div «prueba» para permanecer en el lugar, ya que el usuario se desplaza…

7 Comentarios

  1. 18

    Con posición fija, debe proporcionar los valores para establecer que el div se colocan,
    ya que es un fijo posición.

    Algo como….

    .test
    {
       position:fixed;
       left:100px;
       top:150px;
    }

    Fijo – Genera un elemento con posición absoluta, que se sitúa en relación a la ventana del navegador. El elemento de la posición que se especifica con la «izquierda», «arriba», «derecha», y «de abajo» de las propiedades de

    Más en la posición aquí.

    • «Genera un elemento con posición absoluta» – tal vez una frase está en orden, desde el «posicionamiento absoluto» es otro concepto distinto?
    • JP Le Guen – tal vez hablar con el autor en el w3c entonces.
    • he encontrado una solución con el uso de sólo la izquierda:400px; no hay necesidad de usar la parte superior e inferior… pero debo decir… no es la solución completa para un problema complejo. ya sea w3c o el navegador chicos deben establecer un alto estándar para la interfaz de usuario con css
    • Bhattacharya – no veo cuál es el problema, usted tiene una posición fija establecida para el <div>. Usted necesidad de proporcionar a la posición que debe vivir en el, si no que va a sentarse en la posición predeterminada. Si usted no desea que la funcionalidad, entonces le sugiero que elija otro tipo de posicionamiento tan text-align: right funciona, pero usted eligió fija así que tendrás que definir algunos valores.
    • ¿y que quiero que la posición:fija como quiero que el div a ser visibles cuando el usuario se desplaza y el div a ser alineado a la derecha y i m a cambiar el texto del div padre con javascript y el div padre del ancho de cambios a menos de 200px.. ja, ja, es una pregunta complicada… pero no tengo una respuesta ahora…
    • Loco, te enlaza a w3schools no w3c 😉 Hay una gran diferencia.
    • la pregunta era acerca de «la derecha con posición fija», por lo tanto el uso de la izquierda: no es la solución aquí.
    • La cuestión se resolvió y seleccionado como respuesta hace casi dos años, con lo que su observación inútil.
    • Esta es la respuesta incorrecta. Vea a continuación la respuesta que describe la derecha:x atributo de estilo.

  2. 38

    Puede utilizar dos imbricados div. Pero se necesita un ancho fijo para su contenido, esa es la única limitación.

    <div style='float:right; width: 180px;'>
     <div style='position: fixed'>
       <!-- Your content -->
     </div>
    </div>
    • así que me alegro de haber encontrado esta respuesta.. no creo que hubo un css solución para esto. parece que sólo necesitaba el «fijo» elemento dentro de otro div todo el tiempo.
    • gran respuesta – + 1 para la palabra imbricado
  3. 27

    Uso de la «derecha» atributo junto con posición fija de estilo. El valor proporcionado actúa como un desplazamiento de la derecha de la ventana de la frontera.

    Ejemplo de código:

    .test {
      position: fixed;
      right: 0;
    }

    Si necesitas algo de relleno puede establecer right propiedad con un valor determinado, por ejemplo: right: 10px.

    Nota: float propiedad no trabajo para la posición fixed y absolute

    • Creo que esta es la respuesta exacta.
    • Gracias! Este (style=»right:nada;») realmente funciona en todos los navegadores!
    • esta es la respuesta.
  4. 8

    Tratando de hacer la misma cosa. Si usted quiere ser alineados en el lado derecho, a continuación, establezca el valor de right a 0. En caso de que necesite algo de relleno desde la derecha, ajuste el valor para el tamaño del relleno que usted necesita.

    Ejemplo:

    .test {
      position: fixed;
      right: 20px; /* Padding from the right side */
    }
    • En verdad no hay necesidad de utilizar un div anidados (a pesar de que también funciona).
    • Hmm… Esto no coloque el div en la esquina inferior derecha de la div padre, pero a la derecha con relación al código html de un elemento, es decir, bajar a la derecha a todo lo ancho de la página. Por lo que un enfoque anidado parece necesario. ¿Le falta algo?
    • Gracias! Esto funciona en todos los navegadores!
  5. 1

    hacer un div padre, en css hacen float:right
    luego haga que el niño /div posición fija
    esto hará que el div permanecer en su posición en todo momento y en el derecho

  6. 0

    Usted puede simplemente hacer esto:

    .test {
      position: -webkit-sticky; /* Safari */
      position: sticky;
      right: 0;
    }
  7. -1

    Aquí está la solución real (con cool CSS3 cosas):

    #fixed-square {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9500;
    cursor: pointer;
    width: 24px;
    padding: 18px 18px 14px;
    opacity: 0.618;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.145s ease-out;
    -moz-transition: all 0.145s ease-out;
    -ms-transition: all 0.145s ease-out;
    transition: all 0.145s ease-out;
    }

    Nota la superior:0 y derecha:0. Eso es lo que hizo por mí.

    • No sé por qué votan usted abajo, pero la solución a resolver mi problema.
    • Lo más probable debido a la cantidad insana de sobrecarga en su código. La solución se supone que alrededor de 3 a 5 líneas, agrega en un montón de extras, material innecesario.

Dejar respuesta

Please enter your comment!
Please enter your name here