Dúvida com as posições relativas e absolutas

Estou com dificuldade de visualizar o motivo pelo qual a adição do position: relative no elemento

enviou as aspas para trás do texto. (Eu consigo entender, conforme código abaixo, que o position: absolute [declarado em .citacao-bio::before] vai estar absoluto em relação ao ancestral mais próximo com posicionamento [no caso: .citacao-bio {position: relative}] e o position: relative [declarado em .citacao-bio > p] vai estar relativo considerando o mesmo ancestral, certo?). Além disso, não teria sido possível usar a propriedade Z-index?

.citacao-bio {
    background-color: #D9E5E3;
    border: .5em solid #C2CCCA;
    padding: 1em;
    margin: 1em 2em;
    width: 30ch;
    box-sizing: border-box;
    position: relative;
}

.citacao-bio::before {
    content: '“';
    position: absolute;
    font-size: 10em;
    color: #bbb;
    line-height: .8;
}

.citacao-bio > p {
    position: relative;

}