• slide2 escola
  • bg escola

Últimos Artigos

Recursividade: Que Geringonça é essa?

Matheus Rocha

  Se você trabalha com Desenvolvimento de Softwares ou até mesmo Websites, provavelment...

VER ARTIGO

Você sabe o que são Funções?

Matheus Rocha

Funções são rotinas especializadas em uma ou várias tarefas, e retornam uma saída, de acordo ...

VER ARTIGO

Fundamentos para Design de E-mail Marketing

Leonardo Volpiano

Existem alguns conceitos que são importante seguirmos para preservar a qualidade de quem está...

VER ARTIGO

Position relative, absolute ou fixed?

Matheus Rocha

  Olá, pessoal! Esse é o começo de uma série de artigos onde abordaremos de forma simpl...

VER ARTIGO

Começando com PHP - Formulário sem Refresh

Matheus Rocha

No mundo do Desenvolvimento Web, podemos notar uma divisão clara entre as a finalidade das li...

VER ARTIGO

O que é Flat Design?

Leonardo Volpiano

Flat Design é uma tendência recente, que defende interfaces simples e claros, entre outras ca...

VER ARTIGO

Web Série - Como construir um bom Layout [1]

Matheus Rocha

  Nesta série de artigos, abordaremos conceitos de design voltados para a web e ao fim...

VER ARTIGO

Você sabe o que é área-útil em um site?

Matheus Rocha

De maneira genérica, a área-útil de um site é a área apta à receber interação do usuário. Todo...

VER ARTIGO

Começando com UX - O que é UX?

Matheus Rocha

O que é UX? O termo User Experience foi criado por Donald Norman no início de 1990, quando e...

VER ARTIGO

Primeiros passos com HTML + CSS

Matheus Rocha

  Aqui, trataremos partindo do princípio de que você já conhece as noções básicas de ht...

VER ARTIGO

Html para iniciantes + Workflow - Configurand…

Matheus Rocha

Durante minha jornada como Desenvolvedor Web, tive oportunidade de experimentar, testar, gost...

VER ARTIGO

Position relative, absolute ou fixed?

Escrito por Matheus Rocha.

quebra cabecas pagina web

 

Olá, pessoal! Esse é o começo de uma série de artigos onde abordaremos de forma simplificada, as propriedades standard do CSS. Quando digo standard, me refiro à propriedades fundamentais para o desenvolvimento de qualquer documento web, que utilize CSS (Cascading Style Sheet) como componente de principal componente de design.

 

Entenda sua página-da-Web como sendo um quebra-cabeças - peças que encaixam. Se montarmos um quebra-cabeça e o penduramos na parede, como um quadro ou um retrato, haverá uma força que “empurra” as peças para baixo. O nome dessa força, nós conhecemos como gravidade. Ela segue de cima para baixo, e seu conceito implica em sermos puxados em direção ao “núcleo” da terra. Trazendo para nossa realidade WEBiana, funciona da mesma forma, só que o núcleo é o topo do seu navegador.

 

"Como assim, topo do meu navegador?"
A gravidade no caso dos Websites, é contrária à do exemplo do núcleo-da-terra. Ela atrai os elementos de baixo para cima, fazendo com que seu documento Web possua uma altura automática. Esta medida aumenta na medida que o conteúdo é disposto.

 

"E o Position, onde entra nessa história?"
Voltando aos conceitos triviais de física, sabemos que dois corpos não ocupam o mesmo lugar no espaço. Assim também segue sua página Web. Dois elementos não ocupam o mesmo lugar no espaço. Existem eixos X, Y e Z (largura, altura e profundidade sucessivamente). Ainda que aparentemente um esteja sob o outro, se encontram em “camadas” ou profundidades diferentes.

 

position css

 

Se usarmos

  1. position:relative;

Nosso elemento se comportará da forma como acabamos de prever - ocupando um lugar no espaço, que no caso é o elemento-pai. (o qual aplicamos a propriedade, está submetido)

 

Já, usando

  1. position:absolute;

Nosso elemento passa a NÃO ocupar um lugar no interior do seu pai. Seu posicionamento fica relativo ao “próximo” elemento que contiver position:relative, entre sua hierarquia, ajustando-se automaticamente para a posição X=0 e Y=0 da tela, “encostando” o elemento à margem esquerda e no topo do elemento-pai.

Se o elemento-pai contiver position: relative; o elemento filho com position:absolute; ficará relativo ao pai. Caso contrário, segue relativo ao navegador, ou elemento body do nosso documento HTML.

 

Com

  1. position:fixed;

O elemento se posicionará de forma fixa, não ocupando um espaço no documento web, mas sim na tela do navegador. Ao rolar a página, ele permanece visível e fixo em sua posição. Geralmente é usado em componentes como: menus e propagandas-âncora que acompanham a rolagem da página

 

 

Espero ter ajudado você a entender um pouco melhor como funciona a propriedade Position. Existe um extenso material na internet acerca das propriedades CSS, pesquise e complemente seus estudos. Até mais!

Tags: Cascading Style Sheet Position