Posición absoluta, puede alguien explicar esto

Question

Aquí es un fragmento de CSS que necesito explicó:

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Ok, así que es una posición absoluta de una imagen, obviamente.

1. la parte superior es como el relleno de la parte superior, a la derecha?
2. lo que hace la izquierda el 50%?
3. ¿por qué el margen izquierdo en 445px?

Actualización: la anchura es de 860px.La imagen real es de 100x100 si que hace una diferencia??

Answer 1

1. La parte superior es la distancia desde la parte superior del elemento html o, si esto está dentro de otro elemento con posición absoluta, desde la parte superior de eso.

2. Y 3.Depende de la anchura de la imagen, pero podría ser para centrar la imagen horizontalmente (si el ancho de la imagen es 890px).Hay otras maneras de centro de una imagen de forma horizontal, aunque.Más comúnmente, se utiliza para centro de un bloque de altura conocida verticalmente (esta es la manera más fácil de centro de algo de altura conocida verticalmente):

   top: 50%
   margin-top: -(height/2)px;
   

Answer 2

Esto probablemente se ha hecho con el fin de centrar el elemento de la página (usando el "punto muerto" la técnica).

Esto funciona así:Suponiendo que el elemento es 890px de ancho, se encuentra a position:absolute y left:50%, que pone a su borde izquierdo en el centro de del navegador (bueno, podría ser el centro de algún otro elemento con position:relative).

A continuación, el margen negativo se utiliza para mueva el borde de la mano izquierda a la izquierda una distancia igual a la mitad de la del elemento ancho, así centrarlo.

por supuesto, esto no puede estar centrado exactamente (depende de qué tan amplia que el elemento realmente es que no hay width en el código que has pegado, así que es imposible estar seguro) pero es sin duda en colocar el elemento en relación con el centro de la página

Answer 3

la parte superior es como el relleno de la parte superior derecha?

Sí, la parte superior de la página.

lo que hace la izquierda el 50%?

Mueve el contenido en el centro de la pantalla (100% todo el camino a la derecha.)

¿por qué el margen izquierdo en 445px?

Después de mudarse con "la izquierda:El 50%", este se mueve 445 píxeles de nuevo a la izquierda.

Answer 4

El fragmento de código anterior se refiere a un elemento (podría ser un div, span, de imagen o de otro tipo) con un identificador de sección.

El elemento tiene una imagen de fondo de bla.png que se repiten en ambas direcciones x e y.

El borde superior del elemento se colocará 0px (o cualquier otra unidad) de la parte superior de su elemento padre, si el padre es también la posición absoluta.Si el padre es la ventana, que será en el borde superior de la ventana del navegador.

El elemento tendrá su borde izquierdo coloca el 50% de la izquierda del elemento padre del borde izquierdo.

El elemento será entonces "movido" 445px a la izquierda de ese punto de 50%.

Answer 5

Vas a encontrar todo lo que usted necesita saber por leer sobre el Modelo de caja de CSS

Answer 6

Cuando la posición es absoluta, la parte superior es la distancia vertical desde el padre (probablemente el cuerpo de la etiqueta, por lo tanto, 0 es el borde superior de la ventana del navegador).A la izquierda el 50% es la distancia desde el borde izquierdo.El margen negativo se mueve de nuevo a la izquierda 445px.Por qué, su conjetura es tan buena como la mía.

Answer 7

A riesgo de sonar como el Capitán Obvio, voy a tratar de explicar de forma tan sencilla como sea posible.

La parte superior es un número que determina el número de píxeles que queremos que sea DESDE la parte superior de cualquier elemento html está por encima de ella...así que no necesariamente la parte superior de la página.Desconfíe de su formato html como el diseño de su css.

A su izquierda el 50% debe moverse hasta el centro de la pantalla, dado que es de 50.Tenga en mente que las personas tienen diferentes tamaños de pantalla y se asigna el (0,0) de la parte superior izquierda de la imagen, no el centro de la imagen, por lo que no será perfectamente asignados al centro de la pantalla como se puede esperar.

ESTA es la razón por la margen izquierda a -445 píxeles se utiliza-para moverlo más, fijo.

Buena suerte, espero que esto tenía sentido.Yo estaba tratando de palabra que mi explicación de manera diferente en el caso de que otras respuestas fueron sigue dando de un tiempo difícil.Ellos fueron los grandes respuestas.

(Si tiene dos monitores de distinto tamaño, sugiero jugando un poco con el código para ver cómo cada modificación afecta a los diferentes tamaños de las pantallas!)