|
|
Publicado en 30/10/2014 14:39:28
|
|
|
Establecer este valor de propiedad en absoluto arrastrará el objeto fuera de la posición absoluta normal del flujo del documento, independientemente de la disposición del contenido que lo rodea. Si otros objetos con diferentes propiedades de índice z ya ocupan una posición dada, no se afectarán entre sí, sino que se solaparán en la misma posición. El objeto no tiene una mancha exterior (margen), pero sí una mancha interior (tapete) y un borde (borde).
Para activar la posición absoluta de un objeto, debes especificar al menos uno de los atributos izquierdo, derecho, superior e inferior y establecer este valor de atributo en absoluto. De lo contrario, los atributos anteriores usarán su valor predeterminado auto, lo que hará que el objeto siga las reglas normales de diseño HTML y se renderice inmediatamente después del objeto anterior.
Los atributos TRBL (ARRIBA, DERECHA, ABAJO, IZQUIERDA) solo son válidos si el atributo posición está activado.
Deberías establecer posición:absoluto
Si el padre (infinito) no establece el atributo posición, entonces el absoluto actual se posiciona en combinación con el atributo TRBL en la esquina superior izquierda del navegador como punto original
Si el padre (infinito) establece la propiedad de posición, entonces el absoluto actual se posiciona en combinación con la propiedad TRBL en la esquina superior izquierda del padre (reciente) como punto original.
Al establecer la posición: relativa
La esquina superior izquierda del área de contenido padre (reciente) es el punto original combinado con el atributo TRBL (o desplazamiento respecto al elemento anterior del elemento posicionado en el área de contenido padre), y la esquina superior izquierda del CUERPO es el punto original sin el padre. La posición relativa no puede ser superpratificada. Al usar posicionamiento relativo, el elemento sigue ocupando su espacio original independientemente de si se mueve o no. Por lo tanto, mover un elemento hace que sobrescriba otras cajas.
En términos generales, si la página web está centrada, es fácil cometer errores al usar Absoluto, porque la página web siempre se ha adaptado automáticamente al tamaño de la resolución, mientras que Absoluto usará la esquina superior izquierda del navegador como punto original y no cambiará la posición debido al cambio de resolución. A veces también es necesario confiar en el índice z para establecer la relación entre la parte superior e inferior del contenedor; cuanto mayor es el valor, mayor es la parte superior, y el rango numérico es un número natural. Por supuesto, hay algo a tener en cuenta que la relación padre-hijo no puede establecerse con el índice z, y el nivel hijo debe estar por encima y por debajo del padre.
Establecer este valor de propiedad en relativo mantiene el objeto en el flujo HTML normal, pero su posición puede desplazarse según el objeto anterior. El texto u objetos que siguen a un localizador relativo ocupan su propio espacio sin cubrir el espacio natural del objeto que se está posicionando. En cambio, el texto u objeto después del objeto de posicionamiento absoluto ocupa su espacio natural antes de que el objeto objetivo sea arrastrado fuera del flujo normal del documento. Colocar un objeto de posicionamiento absoluto fuera del viewport hace que aparezca una barra de desplazamiento. Colocar un objeto de posicionamiento relativo fuera del área de visualización no aparece con una barra de desplazamiento. De hecho, el principal problema con el posicionamiento es recordar el significado de cada posición. La posición relativa es la posición inicial del elemento "relativo" al flujo del documento, mientras que la posición absoluta es el elemento antepasado que ha sido posicionado "relativo" al más reciente.
Aquí están las adiciones:
Aunque conozco la posición absoluta (absoluta) y relativa del CSS, ¡nunca he escrito los efectos relevantes yo solo!
¡Después de trabajar más de medio día, puede considerarse terminado! ¡También descubrí algunos de estos dos atributos!
El resumen es el siguiente:
Vamos a echar un vistazo primero a la siguiente estructura de capas
<body>
<div id=posi>
<div id=rel> Esta capa solo aplica position:relative; Estilo </div>
<div id=abs> Esta capa solo aplica posición:absoluto; Estilo </div>
<div id=sss> no aplica <div>estilos
</div>
</body>
1. Absoluto: No ocupa asiento, relativo: ¡tiene un lugar!
Como la superestructura:
¡Las capas con id rel ocuparán una línea cuando se muestran! ¡La capa de ABS detrás solo aparecerá en la siguiente línea!
Cuando se muestra la capa con el ID ABS, ¡se solapará con el ID del SSS detrás!
2. Por defecto (no posicionado en combinación con top, etc.), el absoluto (posicionamiento absoluto) se posiciona por la capa madre
Por ejemplo, si la capa anterior con ID es ABS, si no está posicionada en combinación con TOP, su posición de visualización será con la capa padre POSI (POSI está en la esquina inferior izquierda del documento y también estará en la esquina inferior izquierda)
3. Al combinar atributos superior, inferior, derecho, izquierdo y otros, el absoluto (posición absoluta) se posiciona con la ventana como posición, y relativo se desplaza con su propia ocupación como línea base. De la siguiente manera:
<body>
<div id=posi>
<div id=sss> no aplica <div>estilos
<div id=rel> Esta capa aplica position:relative; abajo:30px; Estilo </div>
<div id=abs> Esta capa solo aplica posición:absoluto; abajo:30px; Estilo </div>
</div>
</body>
Código anterior:
La capa con el id rel sube y solapa la capa con el id SSS
La capa con ID ABS se moverá a una posición a 30 píxeles de la ventana, ¡con la ventana como línea base!
4. Al combinar atributos superior, inferior, derecho, izquierdo y otros, si quieres que la absoluta (posición absoluta) use la capa principal como línea base de posicionamiento, ¡puedes aplicar atributos absolutos o relativos a la capa madre! De la siguiente manera:
<body>
<id=posi style="posición:relativa">
<div id=rel> Esta capa aplica position:relative; abajo:30px; Estilo </div>
<div id=abs> Esta capa solo aplica posición:absoluto; abajo:30px; Estilo </div>
</div>
</body>
El código anterior: id es la capa de Posi, ¡también puedes usar el atributo absoluto!
El id es la capa de REL, que no se ve afectada, y se compensa con su propio marcador como línea base.
La capa con id como ABS se basa en el borde inferior de la capa POSI como línea base de posicionamiento; si la altura de la capa POSI es menor a 30px en este momento, ¡puede que la capa ABS no pueda verla!
|
Anterior:¡Alumnos de Wu Ruan, por favor, no vayáis a "Guangbutun" a comprar un ordenador! ¡Para no dejarse engañar!Próximo:¿Cómo elimino el guion subrayado de un hipervínculo en HTML?
|
