La propiedad css right afecta principalmente a la posición horizontal del elemento y la propiedad css no tiene efecto en los elementos no posicionados.
Sintaxis:
right: auto|length|initial|inherit;
Valores de propiedad:
- auto: esta es una propiedad predeterminada en la que el navegador calculará la posición del borde derecho.
Sintaxis:
right:auto;
Ejemplo 1:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
<!-- "auto" right property-->
right: auto;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div></div>
</body>
</html>
Producción:
- longitud: la longitud ayuda a establecer la posición del borde derecho del elemento en px, cm. Siempre debe tener valor positivo.
Sintaxis:
right:length;
Ejemplo-2:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
<!-- "length" right property>
right: 0px;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div>
</div>
</body>
</html>
Producción:
- initial: la palabra clave inicial se usa para establecer el valor predeterminado de la propiedad CSS.
Sintaxis:
right:initial;
Ejemplo-3:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
<!--"initial" right property-->
right: initial;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div>
</div>
</body>
</html>
Producción:
- heredar: la palabra clave Inherit también se usa para establecer el valor predeterminado de la propiedad CSS. Aquí el valor predeterminado es el valor establecido del elemento anterior.
Sintaxis:
right:inherit;
Ejemplo-4:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
<!--"inherit" right property>
right: inherit;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles por propiedad correcta se enumeran a continuación:
- Google Chrome 1.0
- Borde 12
- Firefox 1.0
- Internet Explorer 5.5
- Ópera 5.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por khajuriameenal1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA