Propriedade CSS right
Como usar a propriedade CSS right para definir a posição direita de um elemento. Veja os valores da propriedade em uso e pratique.
A propriedade CSS right define o deslocamento horizontal de um elemento posicionado — o quanto a sua borda direita fica distante de uma borda de referência. Por si só, ela não tem efeito; só funciona quando o elemento recebe um valor de position diferente do padrão static.
Esta página explica como right se comporta em cada esquema de posicionamento, como ela interage com left, e os erros comuns a evitar.
Como right funciona
A borda de referência a partir da qual right é medida depende inteiramente do valor de position do elemento:
absoluteoufixed—righté a distância entre a borda direita do elemento e a borda direita do seu bloco contentor (paraabsolute, o ancestral posicionado mais próximo; parafixed, o viewport).relative—rightdesloca o elemento para a esquerda a partir de sua posição normal pela quantidade indicada, enquanto o espaço que ele originalmente ocupava é preservado. (O nome é contra-intuitivo: um valor positivo derightmove o elemento para longe da direita, ou seja, para a esquerda.)sticky—righté a distância da borda direita do contêiner de rolagem na qual o elemento "gruda" durante a rolagem.static—rightnão tem nenhum efeito.
Se position for static (o padrão), right é ignorado. Defina position: relative, absolute, fixed ou sticky primeiro.
right vs left
Se você definir tanto left quanto right no mesmo elemento, o resultado depende do width e da direção de escrita:
- Com
width: auto, o elemento se expande para satisfazer ambos os deslocamentos — útil para fixar um elemento a uma distância específica de cada lado do seu contêiner. - Com um
widthfixo, os dois criariam uma restrição excessiva na caixa. Em texto da esquerda para a direita,leftprevalece erighté ignorado; em texto da direita para a esquerda,rightprevalece.
Quando você precisar de apenas um deslocamento horizontal, defina somente left ou somente right e deixe o outro como auto.
| Valor Inicial | auto |
|---|---|
| Aplicável a | Elementos posicionados. |
| Herdado | Não. |
| Animável | Sim. A posição do elemento é animável. |
| Versão | CSS2 |
| Sintaxe DOM | Object.style.right = "50px"; |
Sintaxe
right: auto | length | percentage | initial | inherit;Exemplos
Exemplo com valor em px
Aqui a imagem é retirada do fluxo normal com position: absolute e fixada a 35px da borda direita da página.
<!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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
</body>
</html>Resultado
Exemplo com valor em %
Um valor percentual é resolvido em relação à largura do bloco contentor, portanto right: 30% mantém o deslocamento proporcional à medida que o contêiner é redimensionado.
<!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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
<div>This is some div element.</div>
</body>
</html>Exemplo com o valor initial
initial redefine right para seu valor padrão de auto, permitindo que o navegador posicione a borda direita automaticamente com base nos outros deslocamentos e no tamanho da caixa.
<!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>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | Define a posição da borda direita. É o valor padrão desta propriedade. | Experimente » |
| length | Define a posição da borda direita com px, em, rem, etc. Valores negativos são permitidos. | Experimente » |
| % | Define a posição da borda direita com % do elemento contentor. Valores negativos são permitidos. | Experimente » |
| initial | Define a propriedade com seu valor padrão (auto), permitindo que o navegador calcule a posição automaticamente. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
A propriedade right é uma das quatro propriedades de deslocamento que funcionam em conjunto com position:
left— desloca a borda esquerda do elemento.top— desloca a borda superior do elemento.bottom— desloca a borda inferior do elemento.