2011-04-09 14 views
6

¿Las propiedades de desplazamiento (izquierda, arriba, abajo, derecha) son solo para posiciones no estáticas?Propiedades de desplazamiento de CSS y posición estática

¿Se pueden aplicar a un elemento posicionado estáticamente? Si es así, ¿cuáles son las diferencias de aplicándolas a elementos no posicionados estáticamente?

+0

Estas propiedades de compensación solo se aplican a elementos posicionados (elementos que tienen la propiedad de posición establecida en absoluta, fija o relativa). –

Respuesta

9

a compensar un elemento que es de posición tiene que ser position:relative

las coordenadas, top, right, bottom y left sirven para diferentes propósitos dependiendo de si el elemento es relativamente o posición absoluta.

¿Cuándo se desplaza un elemento en lugar de mover?

cuando realmente se compensa utilizando position: relative; el elemento no se elimina del flujo, y de hecho el espacio que habría ocupado el elemento si hubiera permanecido estático (el valor predeterminado) todavía está reservado para él, por lo tanto solo tiene desfasarlo de su posición original. Cualquier elemento siguiente que aparecerá en los que habría hecho incluso si no había compensado su predecesor - como esto example

en movimiento, no compensando

Sin embargo, si realmente desea mover un elemento, entonces necesita ser eliminado del flujo, por lo que no hay espacio reservado para ello, y entonces es cuando usted usa position:absolute; o arreglado ..esa es la diferencia

Resumen

  • static es el valor predeterminado, y usted sólo tiene que utilizar los márgenes para moverlo, ignorará coordina y z-index

  • relative es espacio reservado, las coordenadas lo compensarán desde su espacio original

  • absolute eliminarán el elemento de th e fluyen y las coordenadas se calcularán de acuerdo con que es containing block, que es el más cercano antepasado relativamente posicionado (o el elemento de body si no existen antepasados ​​posicionadas relativamente)

  • fixed no tiene un bloque que contiene, es decir, puede 't especificar qué elemento debe ser colocado en relación con, se acaba de fijarse en relación al acceso visual

y, finalmente, un elemento no aceptará un z-index si su posición es el valor predeterminado de la electricidad estática, por lo position: relative; sin ninguna de las coordenadas aplicadas es similar a static, pero es útil para z-indexing y es un bloque contenedor para elementos absolutamente posicionados

+0

Comprendo absoluto ahora. Voy a dejar que este se hunda antes de tratar de entender el resto. Gracias – Sidhartha

1

Tiene poco sentido aplicarlos a los elementos position: static, ya que son estáticos.

Para cambio un elemento estático por una cierta cantidad, puede cambiar su propiedad a positionposition: relative;.

Ahora, puede desplazar alrededor con top, left, etc.

Existen unos cuantos tipos de position, a saber position: fixed y position: absolute.

fixed hace que el elemento se fije a la pantalla y no se ve afectado por el desplazamiento, por lo que es como si estuviera pegado al monitor de la computadora. Establecer su top, etc. establece la posición.

absolute coloca el elemento en relación con el documento e ignora todas las reglas de diseño. Establecer su posición establece dónde se coloca en el documento.

+0

probablemente significó la posición: estático; posición: relativa; la pantalla no tiene esos valores ... Pero, ¿qué ocurre si asigno propiedad de compensación al elemento posicionado estáticamente? ¿¿nada en absoluto?? – DrStrangeLove

+1

@DrStrangeLove Sí, nada. –

+0

Puede cambiarlo a 'position: relative' y luego los desplazamientos lo cambiarán. ¿Que estás tratando de hacer? – Blender

0

Se pueden aplicar a los elementos de posición absoluta y fija, que son esencialmente los mismos, pero fijo siempre utiliza la ventana del documento como su ancla. También puede aplicarlos a elementos relativamente posicionados, en cuyo caso son un desplazamiento de lo que se describe mejor como el posicionamiento en línea predeterminado.

Cuestiones relacionadas