Es una propiedad acortada es decir es una propiedad rocortada por que es el conjunto de otras propiedades. Dentro de las propiedades recortadas podemos encontrar al:

OUTLINE:

Parecido al border pero a diferencia del border este no ocupa ninguna pocision en la caja encambio el border ocupa pixeles reduciendo el tamaño de la caja seleccionada.
El outline nos sirve para saber la pocision de una caja pero debido a que otras cajas pueden tapar la caja muchas veces no se ve el borde de la caja debido al eje z por lo que hay un truco para que se vea y es usando position ="relative" en css.

POSITION

Cuando activamos la propiedad position nos permite mover el objeto con top,right,left, bottom

Cundo usamos position nos brinda nuevas posibilidades, dentro de las posibilidades de position tenemos.

STATIC: Es el valor por defecto es decir que no esta pocisionado.
RELATIVE: Cuando posicionamos un elemento de manera relativa podemos moverlo por encima de otro objeto
ABSOLUTE: La posicion absoluta es diferente a la relativa porque esta no reserva un espacio en el dom es decir cuando lo movemos otro elemento puede llegar a ocupar su lugar reservado que tenia.
FIXED: es igual que absolute la diferencia es que este si queda fijado
STICKY

Position Relative

El Z index es la forma de poner un objeto encima de otro quien tenga un valor mas alto estara mas adelante de nuestra vista

Ahora vamos a crear una caja(clase) padre y una caja (clase) llamada hijo.

como vemos la caja hijo esta por encima de la caja padre

Si queremos que la clase padre se posicione por encima del hijo.

Se deben cumplir dos requisitos.

Requisito 1: No colocar z index en la caja de padre

Requisito 2: Colocar z-index=-1