Parágrafos com relative

Olá, Bruno! Tudo bem, cara? =)

De forma bem resumida, esse comportamento se deve à algo chamado de stack level. Mas que raios é esse stack level? Rs.

Podemos traduzi-lo como pilha de níveis, que é a forma como os elementos são "impressos" na tela... E isso acontece na ordem back-to-front.

Para entender isso, vou fazer uma analogia ao z-index, mas é apenas uma analogia... Vamos pensar nos valores 1, 2 e 3... Cada um desses valores corresponde à element:before, element e element:after, respectivamente. Ou seja, se não alterarmos o z-index de cada um desses elementos, o elemento com :before é o primeiro a ser impresso, acima dele ver o próprio elemento e, depois, o elemento com :after, sacou? =)

Espero ter ajudado! Mas (!) já sabe, né? Qualquer dúvida, estamos por aí. Rs...

Abraço e bons estudos,

Fábio

Olá Fábio, vc sempre me ajudando..rsrsrs

Então mas seguindo a sua analogia, os parágrafos deveriam vir já por padrão por cima das aspas, pois primeiro vem o :before(aspas) e depois o elemento (paragrafo), nao seria isso?

Bruno,

Exatamente! Todo elemento com :before deveria estar atrás do elemento, no seu caso, o parágrafo. =)

Fábio

Oi Fábio, mas no exercício , utilizei o :before para criar as apas, os parágrafos já estavam no html, neste caso as aspas devia ter ficado por traz, mas não foi o que ocorreu, ficou o contrario, as aspas é que ficou por cima 0_0

Bruno!

Acabei de dar uma olhada no código e vi que deixei uma coisa passar... O que eu lhe falei continua correto, mas não é o nosso caso. Rs.

Eu estava imaginando um código assim:

p:before {
    position: absolute;
}
p {
    position: relative;
}

Mas o que nós temos é algo assim:

.citacao-bio:before {
    position: absolute;
}
.citacao-bio > p {
    position: relative;
}

Desculpe a falta de atenção aqui... O que está acontecendo é que quando utilizando o posicionamento position:relative, é padrão ele ficar acima dos outros elementos, a menos que você altere o z-index... Era muito mais simples e rápido do que eu estava pensando previamente. Rs.

Desculpe, mesmo, a falta de atenção. Com todo esse rolo que eu devo ter causado na sua cabeça, deu para entender? Rs...

Fábio

Oi Fábio.kkkk fica tranquilo :)

Bom então neste caso, se eu tiver uma div e um paragrafo dentro dele, e eu colocar um position:relative no p ele ficaria por cima da div, seria essa a ideia?

Bruno,

Mais ou menos. Rs... No seu exemplo, se colocar um <p> dentro de uma <div>, ele já ficará por cima dela. Rs.

Mas podemos pensar assim:

<div>
    <span>"</span>
    <p>Conteúdo do parágrafo</p>
</div>

Dessa forma, o parágrafo estará abaixo, - literalmente, não em profundidade - do <span>. Mas se colocarmos um position: relative nele e alterarmos a posição, você verá que ele ficará acima do <span> - em profundidade. =)

Fábio

Oi Fábio, agora entendi perfeitamente, muito obrigado mais uma vez :)

abs

Bruno,

Perfeito! Qualquer coisa, estamos aí. =)

Abraços e bons estudos,

Fábio

Bom dia pessoal. estou com dúvidas nestas aspas. Gostaria de abrir e fechar ela no

e não no nome de quem citou.

Acabei utilizando o ."citacao-bio > p ::before" e "citacao-bio >p:after". Cosegui assim colocar as aspas no começo e fim do paragrafo, só que acabei perdendo o position absolute, fazendo ela ficar na frente do paragrafo. Além disso gostaria que as aspas do after ficassem para dentro do texto.

Outro detalhe que percebi, é que tanto no hover do odd como no focus do odd, as aspas do even ficam por cima do box-shadow gerado.

.citacao-bio:nth-of-type(odd):hover,
.citacao-bio:nth-of-type(odd):focus {
    transform: scale(1.2) rotate(5deg);
}

.citacao-bio:nth-of-type(even):hover,
.citacao-bio:nth-of-type(even):focus {
    transform: scale(1.2) rotate(-5deg);
}


.citacao-bio > p::before {
    content: '”';
    font-size: 10em;
    color: #bbb;
    line-height: 70%;
    position: absolute;
}

.citacao-bio > p::after {
    content: '”';
    font-size: 10em;
    color: #bbb;
    line-height: 70%;
    position: absolute;
}

.citacao-bio > p{
    position: relative;
}

Boa tarde, Renato! Tudo bem, cara? =)

Uma coisa que você pode tentar fazer é utilizar a propriedade z-index, para alterar a "profundidade" do elemento. Acredito que isso não deva ser difícil. =)

Além disso, tenta usar o position: absolute junto com top e left, ou right, para posicionar de acordo com o que você deseja. =)

Ahh, e só uma atençãozinha... Quando for postar uma dúvida, tenta abrir um novo tópico. Isso evita que as pessoas que estavam na discussão antes recebam um e-mail sobre um tópico que já havia sido resolvido, sacou? =)

Espero ter ajudado!

Abraço e bons estudos,

Fábio