
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
enabsolute
ofixed
, la propiedadright
establece la distancia entre el borde derecho del elemento y el borde derecho de su bloque contenedor. - Cuando la propiedad se establece
position
enrelative
, la propiedadright
determina cuánto se moverá el borde derecho del elemento sobre su posición normal. - En cuando la propiedad se establece
position
ensticky
, la propiedadright
actuará como si la posición del elementorelative
fuera cuando está en la ventana gráfica, yfixed
actuará como si no estuviera en la ventana gráfica. - Cuando la propiedad se establece
position
enstatic
(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
yleft
responsable de ubicar el elemento.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS