¿Cómo utilizar el uso completo de posición: relativa en div?

El valor predeterminado de posición es estático (es decir, para cualquier elemento, si su atributo de posición no está definido, su posición: estática)

Si quieres este A div #sub en #demo está ubicado en algún lugar de la esquina superior derecha en relación con #demo, #demo debe estar en una posición relativa y #sub en una posición absoluta.

Absolute se posiciona en relación con su elemento padre más cercano. Si no posiciona #demo relativamente, entonces el posicionamiento absoluto de #sub se posicionará en relación con el cuerpo.

relative está posicionado en relación a sí mismo, por ejemplo: #demo{position: relativo;top:-50px;}, entonces #demo se moverá 50px en relación con su posición original.

estático: Valor por defecto. No hay un posicionamiento especial, el objeto sigue las reglas de posicionamiento HTML;

absoluto: arrastre el objeto fuera del flujo del documento y use atributos izquierdo, derecho, superior, inferior y otros en relación con el más cercano con la mayoría de las configuraciones de posicionamiento El objeto principal está posicionado absolutamente. Si no existe dicho objeto principal, se utiliza el objeto del cuerpo. La cascada se define a través del atributo z-index;

fijo: no compatible. El posicionamiento de objetos sigue el método absoluto. Sin embargo, se deben seguir algunas especificaciones;

relativa: los objetos no se pueden apilar, pero se desplazarán en el flujo normal del documento según los atributos izquierdo, derecho, superior, inferior y otros;