Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Posicionamento de elementos na página com css

posicionamentoCom posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats , o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados. É ótimo para quem tem sites de negócios online e deseja ter uma aparência mais moderna.

O princípio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas conforme imagem abaixo:

 

posicionamento1

 

O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas. Vamos supor que queremos posicionar um cabeçalho. Usando o box model. O cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:

Digite o código abaixo usando um editor de código html, eu recomento do Notepad+ + salve como estilo.css na pasta indicada pelo seu servidor local:

Os trexto em verde são apenas comentários e não influenciam no resultado;

Salve uma imagem dentro da mesma pasta do arquivos index.html e estilo.css para usar no posicionamento.

/* Instrunção css para posicionar a imagem */

h1 {
position:absolute;
top: 100px;
left: 200px;
}

Agora digite o código abaixo e salve na mesma pasta do código anterior com o nome de index.html:

 

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* Título da página */
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* link para chamar o arquivo estilo.css */
</head>
<body>
<div>
<img src=”coloque o link da sua imagem aqui” alt=”Criar Negócios Online”>
</div>
</body>
</html>

 

O resultado é mostrado a seguir:

 

visualizar

Como você pode perceber, posicionar com CSS é uma técnica bem precisa para colocar elementos em qualquer lugar da página. É muito mais fácil do que usar tabelas, imagens transparentes e tudo mais.

Posicionamento absoluto

Um elemento com posicionamento absoluto não deixa nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado. Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.

Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:

Digite o código abaixo e salve como estilo.css na pasta indicada pelo seu servidor local:

Foi usado a regra id da css para criar estas posições:

/*Regras de css para posicionar um elemento em cada canto da página. */ 

#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

Agora digite o código abaixo e salve como index.html:

 

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* Título da página */
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* link para chamar o arquivo estilo.css*/
</head>
<body>
<div id=”box1″> /* id criado para a regra de css */
<img src=”colocar link da sua imagem aqui” alt=”Criar Negócios Online”>
</div>
<div id=”box2″>
<img src=”colocar link da sua imagem aqui” alt=”Criar Negócios Online”>
</div>
<div id=”box3″>
<img src=”colocar link da sua imagem aqui” alt=”Criar Negócios Online”>
</div>
<div id=”box4″>
<img src=”colocar link da sua imagem aqui” alt=”Criar Negócios Online”>
</div>
</body>
</html>

Não se esqueça de usar a mesma imagem que você salvou no exemplo anterior.

Agora basta visualizar no seu navegador e o resultado deve ser igual ao que será encontrado após clicar no botão visualizar:

visualizar

 

Posicionamento relativo

Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.

O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.

Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Note  como as imagens deixam um espaço vazio nas suas posições dentro do documento, é como se não tivesse imagem, este recurso substitui o efeito de transparência na imagem:

Digite o código abaixo e salve no arquivo estilo.css

#bola1 {
position:relative;
left: 350px;
bottom: 150px;
}
#bola2 {
position:relative;
left: 150px;
bottom: 500px;
}
#bola3 {
position:relative;
left: 50px;
bottom: 700px;
}

 

Digite o código abaixo e salve no arquivo index.html:

 

<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<div id=”box1″>
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
<div id=”box2″>
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
<div id=”box3″>
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”>
</div>
</body>
</html>

Agora visualize o código no seu navegador e com certeza não aparecerá nada, pois as imagens ficaram como relativas, ou seja, relativa a cor de fundo da página, ficaram transparente.

 

visualizar

 

Tenha muito secesso em seus negócios online, crie seus sites com aparência moderna e harmônica, seja fiel as características de seu negócio, para ter uma boa impressão dos seus clientes, usuários ou visitantes.

Continue estudando!

 

 

voltar

avançar

 

 

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.