Ejemplo:
2. Posición : Absoluto Posición absoluta:1. No hay posición: absoluto (o relativo) en la capa externa; Luego, el DIV se coloca en relación con el navegador, como se muestra en la figura a continuación (50 píxeles desde el borde derecho del navegador y 20 píxeles del borde inferior).
2. La capa externa tiene posición: absoluta (o relativa); Luego, el DIV se coloca en relación con el borde de la capa externa, como se muestra en la figura a continuación (50 píxeles desde el borde derecho de D y 20 píxeles del borde inferior de D).
Ejemplo:
3. Posición : pariente Posición relativa:Como se muestra en la figura a continuación, se fija en relación con una determinada posición del DIV que contiene este div. Si la capa externa no contiene la suya, se solucionará en relación con el navegador.
Ejemplo:
4. Capas ( índice z ) Las capas en la dirección del eje z pueden entenderse dividiendo en una pila de papel, y cuanto mayor sea el número de capas, mayor es la parte superior.En el ejemplo anterior, vemos que AA cubre A, porque el nivel de visualización del código posterior es más alto, entonces, ¿cómo puede cubrir un AA sin cambiar el orden del código? como sigue:
Ejemplo:
5. Flotar : izquierda , derecha Cuando está a la izquierda y a la derecha , no necesita especificar una ubicación ( izquierda y arriba ), pero es directamente relativa al navegador. Si el exterior está envuelto, se muestra la parte superior izquierda o superior derecha de la posición de la fila eliminada en relación con el DIV externo. Adicional: 1. desbordamiento: oculto; // esconderse más allá de la parte; desplazarse, mostrar la barra de desplazamiento;<div>/div> // truncar el flujo
2. Cursor: la forma del mouse del puntero cuando lo señala;
3. Efecto translúcido:
<div class = box> área transparente <div>
El código en la hoja de estilo es:
.caja
{
Opacidad: 0.5; -Pacilidad de MOZ: 0.5; Filtro: alfa (opacidad = 50)
}
Para resumir el ejemplo de la práctica: parte del diseño de formato del sitio web de AvA
Código HTML: Código XML/HTML Copiar contenido al portapapeles