Exemplo:
2. Posição : Absoluto Posição absoluta:1. Não há posição: absoluto (ou relativo) na camada externa; Em seguida, a div está posicionada em relação ao navegador, como mostrado na figura abaixo (50 pixels da borda direita do navegador e 20 pixels da borda inferior).
2. A camada externa tem posição: absoluta (ou relativa); Em seguida, a div está posicionada em relação à borda da camada externa, como mostrado na figura abaixo (50 pixels da borda direita de D e 20 pixels da borda inferior de D).
Exemplo:
3. Posição : relativa Posição relativa:Como mostrado na figura abaixo, é fixa em relação a uma certa posição da div que contém essa div. Se a camada externa não contiver a dele, ela será fixada em relação ao navegador.
Exemplo:
4. Camadas ( Z-Index ) As camadas na direção do eixo z pode ser entendida como dividida em uma pilha de papel e quanto maior o número de camadas, maior a parte superior.No exemplo acima, vemos que o AA cobre A, porque o nível de exibição do código posterior é mais alto; portanto, como uma cobertura pode ser AA sem alterar a ordem do código. do seguinte modo:
Exemplo:
5. Float : esquerda , direita Quando esquerda e direita , você não precisa especificar um local ( esquerda e superior ), mas é diretamente em relação ao navegador. Se o exterior estiver embrulhado, o canto superior esquerdo ou superior direito da posição da linha removido em relação à div externa será exibido. Adicional: 1. Overflow: oculto; // esconde além da parte; Role, exiba a barra de rolagem;<div>/div> // truncar o fluxo
2. Cursor: a forma do mouse do ponteiro quando aponta para ele;
3. Efeito translúcido:
<div class = box> Área transparente <div>
O código na folha de estilo é:
.caixa
{
Opacidade: 0,5; -Moz-Opacity: 0,5; Filtro: Alpha (Opacity = 50)
}
Para resumir o exemplo da prática: parte do layout do formato do site ADVA
Código HTML: Código XML/HTML Copito de Conteúdo para a área de transferência