Posicionamento CSS
Esquema normal ou fluxo normal é o esquema padrão de posicionamento dos boxe. Segundo as regras desse esquema, elementos de nível de bloco são colocados em sequencia vertical, dentro do elemento que os contém e de cima para baixo, um após o outro na ordem em que aparecem no fluxo do documento, isto é, na marcação HTML. DIV 1 DIV 3 DIV 4 DIV 2 DIV 5
A distância entre cada elemento nível de bloco adjacente é determinada pela propriedade margin. Margens verticais entre blocos adjacente sempre se sobrepõem collapse, ou seja, em lugar de somar as margens será utilizada a margem maior para definir a distancia entre os boxes.
Para elementos inline, a formatação se dá em linha (na horizontal) e dentro do bloco que contém o box inline. A largura do box inline é limitada pela propriedade width do seu bloco container. Excedida aquela largura, o conteúdo do box inline passa para linha de seguinte. HTML <p>este texto <em>tem tres </em>elementos <b> inline</b></p> p { CSS width:30px; Este texto tem tres eleme ntos inline Este texto tem tres elementos inline
O esquema float de posicionamento é definido pela propriedade CSS float e seus valores left, right, none e inherit (herdado). Outra propriedade usada nesse esquema é a propriedade clear e seus valores none, left, right, both e inherit (herdado). Segundo as regras desse esquema, o box é retirado de sua posição de fluxo do documento e flutuado para a direita ou para a esquerda. O espaço original ocupado pelo box não será deixado livre, sendo preenchido pelo elemento que lhe segue no fluxo do documento.
Considere o código: HTML <div class="um">div 1</div> <div class="dois">div 2</div> <div class="tres">div 3</div> <div class="quatro">div 4</div> <div class="cinco">div 5</div> <div class="seis">div 6</div> CSS div { border: solid #000 2px; margin: 5px; padding: 20px 125px; width: 50px; height:20px;
Neste caso temos o esquema norma, onde um boxe aparece em baixo do outro.
Se adicionamos o esquema float em todos os box eles serão posicionados uma a esqueda do outros. Considere adicionar o código em vermelho. CSS div { border: solid #000 2px; margin: 5px; padding: 20px 125px; width: 50px; height:20px; float: left;
Considere o seguinte código: CSS div { border: solid #000 2px; margin: 10px;.um { background-color:#ffff00; width:100px; height: 60px;.dois { background-color:#00ff00; width:200px; height: 100px;.tres { background-color:#0066ff; width:90px; height: 30px; HTML <div class="um">div 1</div> <div class="dois">div 2</div> <div class="tres">div 3</div> </body>
O código anterior cria a seguinte estrutura: Se aplicarmos a propriedade float: right no div um teríamos o seguinte resultado.
Verifiquem que o div 1 foi posicionado a direita e liberou o espaco que ocupava, assim o div 2 passou a ocupar o seu lugar.
Neste exemplo aplicamos a propriedade float: left também para o div1. Veja que o div 1 continua posicionado a esquerda, porem o espaço que ocupava foi liberado, fazendo com que a div 2 ficasse sobreposta.
Vamos tomar como exemplo uma imagem dentro de um paragrafo. HTML <p><img src="borboleta.gif" width="30%" /> As borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas, após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.as borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas, após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.</p>
Como resultado teríamos isso. Vejam que o texto esta afastado da borda da página Poderiamos resolver isso adicionando a propriedade float a imagem. Exemplo Css img { floaf: left;
Caso fosse definido como right a imagem ficaria alinhada a direita.
Também é possivel fazer citações utilizando a propriedade float. Considere o código HTML a seguir. <p><img src="borboleta.gif" width="30%" /> As borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas, após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.<em>as borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas</em> Após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas. Após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.</ </p>
No slide anterior adicionamos um elemento <em> com CSS podemos flutuar ele e adicionar borda. Veja o exemplo: img { float:left; em { float: right; border: solid #666; border-width: 5px 0; width: 40%; margin: 10px 0 10px 10px; padding: 5px 0 5px 5px;
A propriedade CSS z-index rege o empilhamento de boxes segundo o eixo z. O eixo z é perpendicular à tela do monitor e tudo se passa como em um sistema tridimensional de coordenadas. Em outras palavras, utilizamos a propriedade z-index para indicar qual box deve ficar por cima e qual box deve ficar por baixo
Considere a seguinte css div{ border: solid #000 2px; margin: 5px; padding: 20px 125px; width: 50px; height: 30px; position:absolute;.um { backgroundcolor:#ffff00;.dois { backgroundcolor:#66ff99; position:absolute; top: 20px; left: 30px;.tres{ backgroundcolor:#0099ff; top: 40px; left: 60px;
Veja que as divs estão sobrepostas, sendo que a ultima div 3 aparece por cima de todas as demais. Com z-index isso pode ser alterado. Considere a alteração:.dois { background-color:#66ff99; position:absolute; top: 20px; left: 30px; z-index: 4;
A alteração fez com que a div 2 fosse apresentada por completo.
A propriedade z-index recebe um numero inteiro que corresponde ao valor de profundidade dos elementos sobrepostos.