diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.portuguese.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.portuguese.md index ffbd0be800..8275cfb263 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.portuguese.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.portuguese.md @@ -7,7 +7,7 @@ localeTitle: Alterar a posição relativa de um elemento --- ## Description -
O CSS trata cada elemento HTML como sua própria caixa, que geralmente é chamada de CSS Box Model do CSS Box Model . Os itens no nível do bloco iniciam automaticamente em uma nova linha (pense em cabeçalhos, parágrafos e divs) enquanto os itens sequenciais ficam no conteúdo ao redor (como imagens ou vãos). O layout padrão dos elementos dessa maneira é chamado de normal flow de um documento, mas o CSS oferece a propriedade position para substituí-lo. Quando a posição de um elemento é definida como relative , ele permite especificar como o CSS deve movê-lo em relação à sua posição atual no fluxo normal da página. Ele é emparelhado com as propriedades de deslocamento de CSS da left ou right e top ou bottom . Eles dizem quantos pixels, porcentagens ou ems para mover o item para longe de onde ele está normalmente posicionado. O exemplo a seguir move o parágrafo a 10 pixels da parte inferior:
p {
posição: relativa;
fundo: 10px;
}
Alterar a posição de um elemento para relativo não o remove do fluxo normal - outros elementos em torno dele ainda se comportam como se esse item estivesse em sua posição padrão. Nota
O posicionamento oferece muita flexibilidade e poder sobre o layout visual de uma página. É bom lembrar que, independentemente da posição dos elementos, a marcação HTML subjacente deve ser organizada e fazer sentido quando lida de cima para baixo. É assim que os usuários com deficiências visuais (que dependem de dispositivos de assistência, como leitores de tela) acessam seu conteúdo.
+
O CSS trata cada elemento HTML como sua própria caixa, que geralmente é chamada de CSS Box Model do CSS Box Model . Os itens no nível do bloco iniciam automaticamente em uma nova linha (pense em cabeçalhos, parágrafos e divs) enquanto os itens sequenciais ficam no conteúdo ao redor (como imagens ou vãos). O layout padrão dos elementos dessa maneira é chamado de normal flow de um documento, mas o CSS oferece a propriedade position para substituí-lo. Quando a posição de um elemento é definida como relative , ele permite especificar como o CSS deve movê-lo em relação à sua posição atual no fluxo normal da página. Ele é emparelhado com as propriedades de deslocamento de CSS da left ou right e top ou bottom . Eles dizem quantos pixels, porcentagens ou ems para mover o item para longe de onde ele está normalmente posicionado. O exemplo a seguir move o parágrafo a 10 pixels da parte inferior:
p {
position: relative;
bottom: 10px;
}
Alterar a posição de um elemento para relativo não o remove do fluxo normal - outros elementos em torno dele ainda se comportam como se esse item estivesse em sua posição padrão. Nota
O posicionamento oferece muita flexibilidade e poder sobre o layout visual de uma página. É bom lembrar que, independentemente da posição dos elementos, a marcação HTML subjacente deve ser organizada e fazer sentido quando lida de cima para baixo. É assim que os usuários com deficiências visuais (que dependem de dispositivos de assistência, como leitores de tela) acessam seu conteúdo.
## Instructions
Altere a position do h2 para relative e use um deslocamento de CSS para afastá-lo 15 pixels da parte top de onde ele se encontra no fluxo normal. Observe que não há impacto nas posições dos elementos h1 e p circundantes.