Position, estilizando elementos com CSS. \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 55 Min 41 Seg Tempo restante da oferta: 13 55 41 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Position, estilizando elementos com CSS. [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # Position, estilizando elementos com CSS. Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. [ Redação Treinaweb ](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS.jpg) 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. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) 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?](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css) - [Seletores Básicos do CSS](https://www.treinaweb.com.br/blog/seletores-basicos-do-css) - [Seletores avançados do CSS](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) - [Unidades de medidas no CSS](https://www.treinaweb.com.br/blog/unidades-de-medidas-no-css) ## Static [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) Este 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: ```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: ```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: ```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: ```css .container { position: relative; } .treinaWeb { position: absolute; top: 500px; } ``` ## Sticky [ ![HTML5 + CSS3 - Apresentação de Dados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados) Este 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. ```css .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: ```html Treinaweb ``` Código CSS: ```css html, body { margin: 0; padding: 0; background-color: #376fe9; } ``` Resultado: ![position-tela](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/Captura-de-tela-2022-09-02-133528.png) 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 [ ![HTML5 + CSS3 - Dominando o Flexbox](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox) Inicialmente utilizaremos o position fixed, com as seguintes propriedades CSS: ```css html, body { margin: 0; padding: 0; background-color: #376fe9; } .container { height:500em; } .treinaWeb { position: fixed; top: 200px; left: 400px; } ``` Resultado: ![position](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/Captura-de-tela-2022-09-02-142532.png) 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: ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/Captura-de-tela-2022-09-02-150152.png) ```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 [ ![HTML5 + CSS3 - Dominando o CSS Grid Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o CSS Grid Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout) Agora, 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: ```html TreinaWeb Cadastre-se Login ``` 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: ```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: ![position](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/position.png) Agora, vamos aplicar alguns tipos de position para a nossa barra de navegação. ```css 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. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #Position ](https://www.treinaweb.com.br/blog/tag/position) Autor ![Redação Treinaweb](//secure.gravatar.com/avatar/662942287935c97e547cfc12c04be6e5?d=mm) ## Redação Treinaweb [Todos os artigos](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/11142804/unnamed-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ Efeito Parallax apenas com CSS ](https://www.treinaweb.com.br/blog/efeito-parallax-apenas-com-css) Veja nesse artigo como criar o efeito Parallax utilizando apenas CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/CSS-SHORTHAND-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css) Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/04170829/css-slider-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ Slideshow apenas com CSS ](https://www.treinaweb.com.br/blog/slideshow-apenas-com-css) Aprenda a criar um slideshow de maneira bem simples utilizando apenas CSS moderno. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/06113144/css-sprites-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Trabalhando com Sprites no CSS ](https://www.treinaweb.com.br/blog/trabalhando-com-sprites-no-css) Veja como trabalhar com sprites no CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/10/o-problema-do-iphone-x-e-a-web-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 9 anos atrás ## [ O problema do iPhone X e a Web ](https://www.treinaweb.com.br/blog/o-problema-do-iphone-x-e-a-web) Com o lançamento do iPhone X, alguns problemas podem "aparecer" em suas páginas web. Saiba quais são e veja como resolvê-los. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/novos-recursos-do-ecmascript-2022-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Novos recursos do ECMAScript 2022 ](https://www.treinaweb.com.br/blog/novos-recursos-do-ecmascript-2022) Novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/como-fazer-animacoes-infinitas-de-fundo-com-css-puro-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 6 anos atrás ## [ Como fazer animação infinita de fundo com CSS? ](https://www.treinaweb.com.br/blog/como-fazer-animacao-infinita-de-fundo-com-css) Veja como criar uma animação infinita de fundo com efeito parallax usando apenas CSS puro. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/iterators-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Generators no PHP ](https://www.treinaweb.com.br/blog/generators-no-php) Saiba o que são Iterators e Generators, bem como os seus casos de uso. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/05155042/iterators-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Iterators no PHP ](https://www.treinaweb.com.br/blog/iterators-no-php) Iterator é um mecanismo que permite que um objeto seja iterado e ele próprio fica no controle granular dessa iteração. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **13h 55min 41s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58