Olá pessoal , eu sou novo aqui e percebi que as pessoas não postam dicas ou conteúdo sobre html, css e/ou java script , vocês simplesmente buscam cursos para disponibilizar o link aqui ,acho que a essência se perdeu então resolvi fazer um tutorial sobre posicionamento de divs .
Position absolute:
O posicionamento absoluto permite que você posicione a div em qualquer lugar da pagina.
Position relative:
O posicionamento relativo permite que você posicione a div dentro de outra div (ou container).
Position fixed:
O position fixed fixa a div em uma determinada posição e não se movimenta com a pagina quando se usa a barra de rolagem.
Dificuldades que alguns encontram :
Um amigo meu uma vez me perguntou como alinhar uma div exatamente ao centro da pagina pois ele procurou no google e não achou (eu duvido muito que ele tenha pesquisado no google mas é o que ele diz rsrs...) ;
Primeiro precisamos de uma pagina html:
Position absolute:
O posicionamento absoluto permite que você posicione a div em qualquer lugar da pagina.
Position relative:
O posicionamento relativo permite que você posicione a div dentro de outra div (ou container).
Position fixed:
O position fixed fixa a div em uma determinada posição e não se movimenta com a pagina quando se usa a barra de rolagem.
Dificuldades que alguns encontram :
Um amigo meu uma vez me perguntou como alinhar uma div exatamente ao centro da pagina pois ele procurou no google e não achou (eu duvido muito que ele tenha pesquisado no google mas é o que ele diz rsrs...) ;
Primeiro precisamos de uma pagina html:
Código HTML:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"/> <title>Posicionamento</title> <link rel="stylesheet" type="text/css" href="css/style.css" media="alla"/> </head> <body> <div id="global"> </div> </body> </html>
copie este código e salve em html
crie uma pasta chamada css e dentro da pasta crie um arquivo chamado style.css
dentro do arquivo css você vai fazer o seguinte
a sequência do margin ali é a seguinte:
margin: top right bottom left;
o segredo e dividir a largura por 2 e usar valores negativos bem simples não é ?
crie uma pasta chamada css e dentro da pasta crie um arquivo chamado style.css
dentro do arquivo css você vai fazer o seguinte
Código HTML:
#global{ position:absolute; left:50%; top:50%; width:200px; height:150px; margin:-75px auto auto -100px; border: 1px solid black; }
margin: top right bottom left;
o segredo e dividir a largura por 2 e usar valores negativos bem simples não é ?