Características right en CSS

Una propiedad right en CSS la cual determina la posición horizontal de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.

Funciones right css

Valor inicial	`auto`
Aplicado a	Elementos posicionados.
Heredable	No
Móvil	Sí
Valor calculado	Como se especifica, pero con longitudes relativas convertidas a absolutas.

/* <longitud> valores */ 
right:  3px ; 
right:  2.4em ;
/* <porcentajes> valores relativos */ 
/* tomados en relación con el ancho del bloque contenedor del objeto */ 
right:  10%;
/* palabra reservada */ 
right :  auto;
/* valores globales */ 
right: inherit;
right: initial;
right: unset;

El efecto de la propiedad right depende del valor de la propiedad position:

Cuando la propiedad se establece position en absolute o fixed, la propiedad right establece la distancia entre el borde derecho del elemento y el borde derecho de su bloque contenedor.
Cuando la propiedad se establece position en relative, la propiedad right determina cuánto se moverá el borde derecho del elemento sobre su posición normal.
En cuando la propiedad se establece position en sticky, la propiedad right actuará como si la posición del elemento relative fuera cuando está en la ventana gráfica, y fixed actuará como si no estuviera en la ventana gráfica.
Cuando la propiedad se establece positionen static(es decir, el elemento no puede cambiar su ubicación), la propiedad right no tendrá ningún efecto.

Cuando se especifican valores para las propiedades right y left la posición del elemento se especifica de más de una forma, la propiedad left tendrá prioridad en los right contenedores de izquierda a derecha y la propiedad tendrá prioridad en los contenedores de derecha a izquierda.

Ejemplos y aplicaciones en código

Este ejemplo muestra el uso de la palabra reservada auto con un elemento <div> de posición absoluta:

< div  class = "parent" > 
    < span > elemento principal del contenedor </ span > 
    < div  class = "actual" > posición real </ div > 
</ div >

Código CSS:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}
.actual {
  position: absolute;
  right: auto;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Ejemplo de uso de un valor longitudinal <length> con la posición del elemento relative establecida en relativa a través de la propiedad position. Observe cómo el elemento se moverá hacia la izquierda en relación con su posición original:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}
.actual {
  position: relative;
  right: 20px;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Y este ejemplo trata sobre el uso de la propiedad right con un elemento cuya posición es absoluta:

.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
  position: relative;
}
.actual {
  position: absolute;
  right: 0;
  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	5.5	5	1.0

Características generales

<length>

Un valor longitudinal <length> negativo o positivo que representa:

La distancia entre el borde izquierdo del elemento y el borde derecho de su bloque contenedor. Si la posición del elemento es absolutamente (absolutamente posicionado)
La distancia que el borde derecho del elemento se moverá por encima de su posición normal. Esto es si el elemento está relativamente posicionado.

<percentage>

Un porcentaje de la altura del bloque que contiene el elemento.

auto

Si la posición del elemento es absoluta, este valor hará que la posición del elemento se determine en función de la propiedad left.
Si la posición del elemento es relativa, este valor establecerá la posición del elemento según la propiedad desde la posición inicial del elemento, y si la propiedad también es igual, el elemento left no se moverá horizontalmente left auto.

Estructura right css

right: <length> | <percentage> | auto;

Consulte también

La página de propiedades position que describe cómo se coloca el objeto en el documento.
La página de cada una de las propiedades top, bottom y left responsable de ubicar el elemento.