Explicación detallada del uso del atributo de posición en HTML (cuatro tipos)

Los cuatro valores de atributo de posición:

1.relativo

2.absoluto

3.fijo

4.estático

Estos cuatro atributos se describen a continuación.

 <div id=padre> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>

El atributo relativo es relativamente simple. Necesitamos averiguar de qué objeto está compensado. La respuesta está en su ubicación. En el código anterior, sub1 y sub2 están en una relación de hermanos. Si configura un atributo relativo de sub1, por ejemplo, configure el siguiente código CSS:

 #sub1{ posición: relativa; relleno: 5px; arriba: 5px izquierda: 5px;}

Podemos entender que si no se establece el atributo relativo, la posición de sub1 debe estar en una posición determinada de acuerdo con el flujo normal de documentos. Pero cuando la posición de sub1 se establece en relativa, se compensará de acuerdo con su supuesta posición de acuerdo con los valores de arriba, derecha, abajo e izquierda. El significado relativo de relativo también se refleja en esto.

Para esto, solo necesita recordar dónde debe estar sub1 si no lo establece relativo, y compensarlo desde donde debería estar una vez que esté configurado.

La siguiente pregunta es, ¿dónde está la posición de sub2? La respuesta es dónde estaba antes y dónde está ahora. Su posición no cambiará porque sub1 agrega el atributo de posición.

¿Qué pasará si la posición de sub2 también se establece en relativa en este momento? En este momento, sigue siendo el mismo que sub1, desplazado según su posición original.

Tenga en cuenta que el desplazamiento relativo se basa en el lado superior izquierdo del margen del objeto.

Esta propiedad siempre es engañosa. Se dice que cuando el atributo de posición se establece en absoluto, siempre se posiciona de acuerdo con la ventana del navegador. En realidad, esto es incorrecto. De hecho, ésta es una característica de las propiedades fijas.

Cuando la posición de sub1 se establece en absoluta, ¿quién se utiliza como objeto a compensar? Hay dos situaciones aquí:

(1) Cuando el objeto principal de sub1 (o bisabuelo, siempre que sea un objeto principal), el padre también establece el atributo de posición, y el valor del atributo de posición es absoluto o relativo, es decir, no es el valor predeterminado, luego sigue sub1. Este padre se utiliza para el posicionamiento.

Tenga en cuenta que aunque se ha determinado el objeto, hay algunos detalles que requieren su atención, es decir, ¿qué punto de posicionamiento del padre debemos utilizar para posicionarlo? Si el padre establece atributos como margen, borde, relleno, etc., entonces este punto de posicionamiento ignorará el relleno y se posicionará desde el principio del relleno (es decir, solo comenzando desde la esquina superior izquierda del relleno). es decir, ignorando el relleno, por supuesto no ignorará el margen y el borde.

La siguiente pregunta es, ¿dónde está la ubicación de sub2? Porque cuando la posición se establece en absoluta, hará que sub1 desborde el flujo normal de documentos, como si no perteneciera al padre, flotaría hacia arriba. Se llama capa en DreamWeaver, pero en realidad significa lo mismo. En este momento, sub2 obtendrá la posición de sub1 y su flujo de documentos ya no se basa en sub1, sino que comienza directamente desde el padre.

(2) Si sub1 no tiene un objeto principal con un atributo de posición, entonces el cuerpo se utilizará como objeto de posicionamiento y se colocará de acuerdo con la ventana del navegador. Esto es más fácil de entender.

Fijo es un absoluto especial, es decir, fijo siempre usa el cuerpo como objeto de posicionamiento y se coloca de acuerdo con la ventana del navegador. Incluso si se arrastra la barra de desplazamiento, su posición no cambiará. Similar a fondo adjunto: fijo

Por supuesto, no parece haber soporte bajo Dreamweaver.

El valor predeterminado de posición. Generalmente, cuando el atributo de posición no está establecido, se organizará de acuerdo con el flujo normal de documentos.

Lo anterior es el uso de posición en HTML introducido por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!