O position é uma propriedade CSS que define como um elemento deve ser posicionado página, ou seja, no corpo do documento o body. Essa propriedade possui quatro propriedades que são top, bottom, right e left, respectivamente, topo, abaixo, direita e esquerda. Que determinam a localização final do elemento, que irá se deslocar conforme especificado na estilização.
Além dessas propriedades, o position possui cinco tipos atribuídos a ele, que determinam como o elemento será posicionado de acordo com página. Que são static, fixed, relative, absolute e sticky. E neste artigo nos aprenderemos como usar cada um deles para facilitar a criação de nossas páginas web. Para isso preciso que você possua conhecimento básico em HTML e CSS. Caso precise relembrar esses conhecimentos básicos, nós temos alguns artigos aqui no blog da TreinaWeb que podem te ajudar, são eles:
- O que é e como começar com HTML e CSS?
- Seletores Básicos do CSS
- Seletores avançados do CSS
- Unidades de medidas no CSS
Static
Curso HTML5 + CSS3 - Fundamentos
Conhecer o cursoEste tipo define o valor padrão que um elemento terá. Isso significa que se você não declarar a posição de um elemento via CSS, ele será automaticamente definido como static. Contudo, ele não recebe a declaração das quatro propriedades já citadas, pois, a posição já é estática por padrão, ou seja, é o mesmo que não definir a propriedade position.
Exemplo de como aplicar no CSS:
.treinaWeb {
position: static;
}
Fixed
Este tipo faz o elemento ficar fixo na página, independente do scroll, ou seja, permanece sempre no mesmo lugar, mesmo que a página seja rolada para baixo ou para cima. Porque está posicionado em relação à janela de visualização. Além disso, recebe todas as propriedades do position.
Exemplo de como aplicar no CSS:
.treinaWeb {
position: fixed;
height:200vh;
top: 200px;
left: 400px;
}
Relative
Este tipo coloca o elemento em relação à sua posição atual sem alterar o layout ao redor dele, ou seja, podemos usar qualquer uma daquelas quatro propriedades citadas anteriormente, para fazer com que o elemento seja ajustado para fora da sua posição normal.
Exemplo de como aplicar no CSS:
.treinaWeb {
position: relative;
left: 200px;
}
Absolute
Este tipo posiciona o elemento ao elemento mais próximo dele, ou seja, ele possui uma hierarquia em relação a outro. Se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usará o corpo do documento e se moverá com a rolagem da página.
Exemplo de como aplicar no CSS:
.container {
position: relative;
}
.treinaWeb {
position: absolute;
top: 500px;
}
Sticky
Curso HTML5 + CSS3 - Apresentação de Dados
Conhecer o cursoEste tipo posiciona com base na barra de rolagem do usuário, ele fixa na tela quando se chega em sua posição, ou seja, ele alterna entre relativo e fixo.
.treinaWeb {
position: sticky;
top: 0;
}
Position na prática
Agora, utilizaremos as propriedades e tipos, na prática, para entender melhor como funcionam. Para isso, será necessário criamos um arquivo HTML e um arquivo CSS.
Código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Importante: Caso crie um arquivo CSS com um nome diferente, lembre-se de alterar aqui-->
<link rel="stylesheet" href="treinaweb.css" />
<title>Treinaweb</title>
</head>
<body>
<main>
<div class="container">
<div class="treinaWeb">
<img src="https://yt3.ggpht.com/ytc/AMLnZu_ALATbKxOhI49nDGUy_wRKLoaEoQkdf-5F2NkA0g=s900-c-k-c0x00ffffff-no-rj" alt="treinaWeb" width="20%" />
</div>
</div>
</main>
</body>
</html>
Código CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #376fe9;
}
Resultado:
Como podemos observar, definimos uma cor de fundo azul no body para diferenciar da cor da imagem e adicionamos um paddind: 0 e um margin: 0 para nossa imagem ficar fixada ao topo da página.
Assim, poderemos visualizar as futuras alterações.
Alterando posições do elemento com Position
Curso HTML5 + CSS3 - Dominando o Flexbox
Conhecer o cursoInicialmente utilizaremos o position fixed, com as seguintes propriedades CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #376fe9;
}
.container {
height:500em;
}
.treinaWeb {
position: fixed;
top: 200px;
left: 400px;
}
Resultado:
Observando o resultado, nós podemos visualizar que mesmo descendo a barra de rolagem, a nossa imagem permanece fixa na tela. E, se deslocou 200px em relação ao topo e 400px em relação à esquerda da nossa página.
Se observamos, podemos notar que a imagem está menor em relação à anterior, isso porque definimos agora uma altura para a tela no container de 500em, e ela está aplicando o seu tamanho para classe .treinaWeb e não ao tamanho do body.
Podemos observar está diferença na seguinte imagem, apenas adicionando um border: solid 2px black na classe .treinaweb no nosso CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #376fe9;
}
.container {
height:500em;
}
.treinaWeb {
position: fixed;
top: 200px;
left: 400px;
border: solid 2px black;
}
Assim, podemos visualizar o tamanho da posição ocupada pela nossa classe .treinaWeb.
Como usar a propriedade position no navbar
Curso HTML5 + CSS3 - Dominando o CSS Grid Layout
Conhecer o cursoAgora, que observamos seu uso no exemplo de imagem citado anteriormente, vamos juntos criar uma barra de navegação atribuindo tipos e propriedades CSS do Position.
Para isso, precisaremos de um novo código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Fonte de texto -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900"
rel="stylesheet"
/>
<!-- Estilo CSS-->
<link rel="stylesheet" href="navbar.css" />
<title>TreinaWeb</title>
</head>
<body>
<header>
<div class="container">
<div class="nav-menu">
<img src="https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.webp" alt="Logo treinaWeb" width="20%" />
<div class="btn-header">
<a class="btn-contained" href="#">Cadastre-se</a>
<a class="btn-void" href="./login.html">Login</a>
</div>
</div>
</div>
</header>
</body>
</html>
Nesse trecho de código HTML utilizamos uma div com a classe container que recebe nossas classes btn-header e btn-void as alinhando corretamente ao layout.
Em seguida, partimos para nosso código CSS:
html,
body {
margin: 0;
padding: 0;
}
:root {
--primary: #6b2aee;
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
}
/* Header */
header {
padding: 15px 0;
box-shadow: 1px 0 15px rgba(98, 98, 98,0.294);
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-header {
display: flex;
align-items: center;
gap: 30px;
}
.btn-contained {
background-color: var(--primary);
padding: 10px 35px;
color: #fff;
text-decoration: none;
border-radius: 25px;
}
.btn-void {
background-color: #fafafa;
padding: 10px 35px;
color: var(--primary);
text-decoration: none;
border-radius: 25px;
}
Para a estilização do CSS, foi inicialmente usada uma margem zero e um preenchimento zero, para a barra de navegação “colar” na parte superior da tela de visualização da página, depois, seguimos adicionando o :root para definições de cores e fonte. E, foi posteriormente definido o tamanho total do container.
No header, foi atribuído um preenchimento interno que se aplicará ao display: flex da classe .nav-menu, e um box-shadow para efeito de sombra na parte inferior da barra de navegação.
E, no .nav-menu um flexbox com atribuição do space-between para definir o espaço entre os itens de imagem do logo tipo e botões em que foi aplicando um gap para separá-los.
Obteremos o seguinte resultado:
Agora, vamos aplicar alguns tipos de position para a nossa barra de navegação.
html,
body {
margin: 0;
padding: 0;
height: 200em;
}
:root {
--primary: #188cc2;
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 15px;
}
/* Header */
header {
padding: 15px 0;
box-shadow: 1px 0 15px rgba(98, 98, 98, 0.294);
position: fixed;
top: 0;
right: 0;
float: left;
width: 100em;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-header {
display: flex;
align-items: center;
gap: 30px;
}
.btn-contained {
background-color: var(--primary);
padding: 10px 35px;
color: #fff;
text-decoration: none;
border-radius: 25px;
}
.btn-void {
background-color: #eee5e5;
padding: 10px 35px;
color: var(--primary);
text-decoration: none;
border-radius: 25px;
}
Aplicando o position: fixed podemos visualizar que descendo a barra de rolagem o nosso navbar se mantém fixo na página.
E, se, adicionamos um top: 50px ele se deslocar do topo da tela. Mas, se mantém fixo a ela.
Se adicionamos um novo elemento como sticky, a barra de navegação também se fixará a página.
Conclusão
Neste artigo, conseguimos aprender sobre position, e como usá-lo em alguns exemplos práticos com CSS, além de conhecer quais propriedades podem ser aplicadas nele, e como devemos aplicar. Assim, finalizamos nosso artigo e seguimos em nossa trilha de aprendizado.
