No entiendo por qué div.class se mueve hacia la parte inferior derecha.

Para eso están las propiedades CSS bottom y right . Posicionan el lado inferior y derecho del elemento, contando desde el lado inferior y derecho, en este caso desde la ventana gráfica, ya que la posición es fixed .

Realmente quiero saber el significado de '0' precisamente en una posición fija.

0 es un número de unidades. Podría haberse especificado como 0px o 0pt o con otra unidad, pero dado que no importa qué unidad se use, ya que es 0 de todos modos, se especifica sin unidad. Representa la distancia desde el cuadro delimitador de la ventana gráfica.

¿Por qué el borde nunca se extiende hacia el lado derecho si cambio ( bottom: 0; right: 0; ) a ( top: 0; right: 0; bottom: 0; left: 0; )?

Porque la especificación width: 300px estipula cuál debe ser el ancho del elemento, por lo que la representación debe renunciar a right: 0 , ya que de lo contrario el ancho sería diferente. Sin embargo, si descarta la especificación de width , el elemento ocupará todo el espacio de la ventana gráfica:

 div.fixed { position: fixed; _width: 300px; top: 0; left: 0; bottom: 0; right: 0; border: 3px solid #73AD21; }

 <h2>position: fixed;</h2> <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p> <div class="fixed"> This div element has position: fixed; </div>

El número representa la distancia desde la parte inferior/derecha. Por lo tanto, ir al bottom: 10px lo colocaría a 10px de la parte inferior de la ventana. Es básicamente una forma de posicionarlo. ¡Espero que esto ayude!

@Gerald cuando establece la posición fija, el elemento está en posición fija en la pantalla. Puede cambiar la posición del elemento con las propiedades superior, izquierda, derecha e inferior de css. Por ahora, si establece bottom:0, right: 0, el elemento se establece en la esquina inferior derecha de la pantalla. Si lo desea, configure la esquina inferior izquierda, configure la izquierda: 0, la parte inferior: 0 y elimine la derecha: 0. También puede establecer px, em, vw, vh o %, por ejemplo, izquierda: 10 px, habría un espacio de 10 px entre el elemento y la izquierda. Si desea la parte inferior central, configure la parte inferior: 0, izquierda 50%, transforme: translateX (-50%) Espero que le sea útil ~