Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades correctas
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada derecho Con sintaxis y ejemplos.
describir
La propiedad right de CSS, combinada con la propiedad position, define la posición correcta de un elemento.
sintaxis
La sintaxis para la propiedad CSS correcta es:
right: value;parámetro o parámetro
valor
Valor correcto al posicionar un elemento usando la propiedad position. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | Un valor fijo en píxeles, em, etc. div {posición: relativa; derecha: 6px; } div {posición: absoluta; derecha: 8em; } |
| porcentaje | valor porcentual div { posición: fija; derecha: 10%; } |
| carro | Este es el comportamiento predeterminado div { posición: relativa; derecha: auto; } |
| heredar | Indica que el elemento heredará los derechos de su elemento principal div {posición: heredar;} |
notas
- Cuando el valor se proporciona como un porcentaje, es relativo al ancho del bloque que lo contiene.
- Si la propiedad de posición se establece en relativa, absoluta o fija, puede establecer las propiedades superior, derecha, inferior y derecha.
- Si la propiedad de posición se establece en estática, las propiedades superior, derecha, inferior y derecha no se aplican.
- Consulte también las propiedades de posición, superior, inferior e izquierda.
Compatibilidad del navegador
La propiedad CSS right tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- Estático, Relativo, Absoluto: IE 4
- Corregido: IE 7
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad correcta a continuación, explorando ejemplos de cómo usarla en CSS.
posición relativa
Veamos un ejemplo en el que establecemos la propiedad de posición en relativa y establecemos un valor para la propiedad correcta.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: relative; right: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición relativa y configuramos la propiedad correcta en 15px. Esto significa que el elemento div (identificado por la clase totn2) se moverá 15 px desde la derecha con respecto a donde se ubicaría en el diseño normal.
posición absoluta
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en absoluto y establecer un valor para la propiedad correcta.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: absolute; right: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en posición absoluta y configuramos la propiedad correcta en 15px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de su contenedor principal a una posición absoluta de 15 px desde el lado derecho del contenedor.
Posición fija
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en fijo y establecer un valor para la propiedad correcta.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: fixed; right: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición fija y configuramos la propiedad correcta en 15px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de la ventana gráfica de la pantalla a una posición fija de 15 px desde el lado derecho de la ventana gráfica.