Elemento fora da div "pai"

Front-end
#1

Eu achei que a posição dos elementos fosse calculada em função do elemento pai. Não está correto?

Porque eu tenho o HTML (vou anexar o completo):

<div class="respostas">
	<label>
		<input type="radio" name="resp" value="a"/>
			Música A - Artista A
	</label> </br>
	<label>
		<input type="radio" name="resp" value="b"/>
			Música B - Artista B
	</label> 
	</br>

E o CSS:

.respostas{
    text-align: center;
    padding-top: 20%;
}

.respostas label{
   // height: 10px;
    font-style: italic; 
    position: absolute;
    left: 100px;    
}

Porém, os labels estão pra fora da div:

Capturar.JPG748×313 30.6 KB

O que eu entendi errado? Por que os labels tão fora da div?

perguntas.jsp.txt (1,5 KB)

estilo.css (777 Bytes)

#2

ok, entendi. o elemento tá com position absolute e se referenciando pelo body…

1 curtida
#3

Olá @nanquim como vai? Ocorre que todos os elementos do HTML por padrão são “Estáticos” , com isso, colocando o valor de position: absolute; na suas labels vai fazer com que os elementos dentro da div responda a posição do body e independentemente da largura da sua div de classe respostas as labels continuam no mesmo lugar. espero ter ajudado!

1 curtida