Elemento filho maior que elemento pai

Oi, Bruno, tudo bem?

Pelo que intendi tu quer que o elemento filho crie um contexto em que o elemento pai fique "escondido"?

Se for isso, pode ser assim?

<div class="elemento elemento-pai>
    <div class="elemento-filho">Filho</div>
  </div>

.elemento {
    width: 200px;
    height: 200px;
    line-height: 200px;
    color: #FFF;
    text-align: center;
    cursor: pointer;
  }

  .elemento-pai {
      position: relative;
      background-color: blue;
  }

  .elemento-filho {
    position: absolute;
    width: 300px;
    height: 300px;
    line-height: 100px;
    background-color: red;
  }

Nesse exemplo, o elemento filho está com o position:relative e o filho com position: absolute, e o elemento filho cobre o pai. Para cobrir a página você deverá ajustar os posicionamentos de acordo como está o seu código e estilização do body.

Espero ter te ajudado :}

Show Lais !

Mas esqueci de mencionar algo que eu precisava no post, eu precisava que esse elemento filho cobrisse 100% da tela.

Na prática eu queria que isso fosse um modal. O elemento "pai" seria um body normal ( só que ele não cobre 100% da tela) e o elemento filho seria 100% da tela ( ele seria o background do modal e dentro desse background teria o modal). O que você fez ai no código foi exatamente o que eu tinha tentado só que 100% no elemento "filho".