Propiedad right de CSS

La propiedad right especifica parte de la posición de los elementos posicionados.

Para elementos posicionados de forma absoluta o fija, la propiedad right especifica la distancia entre el borde derecho del elemento y el borde derecho de su bloque contenedor.

INFO

Si position se establece en static, la propiedad right no tiene efecto.

El efecto de right depende del posicionamiento del elemento (consulta la propiedad position):

Si position se establece en absolute o fixed, la propiedad right especifica la distancia entre el borde derecho del elemento y el borde derecho de su bloque contenedor.
Si position se establece en relative, la propiedad right especifica la distancia a la que se desplaza el borde derecho del elemento hacia la derecha desde su posición normal.
Si position se establece en sticky, la propiedad right especifica la distancia desde el borde derecho del viewport cuando el elemento se vuelve pegajoso.
Si position se establece en static, la propiedad no tiene efecto.

Valor inicial	auto
Se aplica a	Elementos posicionados.
Heredado	No.
Animable	Sí. La posición del elemento es animable.
Versión	CSS2
Sintaxis DOM	Object.style.right = "50px";

Sintaxis

Sintaxis de la propiedad CSS right

css

right: auto | length | initial | inherit;

Ejemplo con valor `px`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://es.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>

Try it Yourself »

Resultado

CSS right Property

Ejemplo con valor `%`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 100%;
        background-color: #ccc;
        color: #ffffff;
      }
      img {
        position: absolute;
        right: 30%;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://es.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>

Try it Yourself »

Ejemplo con valor `initial`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        max-width: 300px;
        line-height: 20px;
      }
      p {
        position: absolute;
        right: initial;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <div>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
      <p>Some text</p>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probar
auto	Establece la posición del borde derecho. Es el valor predeterminado de esta propiedad.	Probar »
length	Establece la posición del borde derecho con px, em, rem, etc. Se permiten valores negativos.	Probar »
%	Establece la posición del borde derecho en % del elemento contenedor. Se permiten valores negativos.	Probar »
initial	Establece la propiedad en su valor predeterminado (`auto`), lo que permite que el navegador calcule la posición automáticamente.	Probar »
inherit	Hereda la propiedad del elemento padre.

Práctica

¿Cuál es la función de la propiedad 'right' en CSS?

Se utiliza para mover un bloque o una línea completa de texto a la derecha de su posición habitual.Desplaza el borde derecho de un elemento hacia la derecha de la pantalla.Desplaza el borde derecho de un elemento hacia la izquierda de la pantalla.Se utiliza para posicionar el borde superior de un elemento a una distancia específica del borde derecho de su elemento contenedor.Puede afectar la posición de otros elementos.Solo es efectiva cuando la propiedad position es 'static'.Solo es efectiva cuando la propiedad position es 'absolute', 'fixed', 'relative' o 'sticky'.

Propiedad right de CSS ​

Sintaxis ​

Ejemplo con valor px ​

Resultado ​

Ejemplo con valor % ​

Ejemplo con valor initial ​

Valores ​

Práctica ​

Propiedad right de CSS

Sintaxis

Ejemplo con valor `px`

Resultado

Ejemplo con valor `%`

Ejemplo con valor `initial`

Valores

Práctica