Pessoal, estou fazendo a parte do banner do Twitter. No entanto, fui fazer antes de olhar como o código final ficava e achei que tinha feito certo. No entanto, não funcionou.
Pois bem, acabei fazendo alguns testes e surgiu uma dúvida. Tenho o seguinte código:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="reset.css">
<meta charset="utf-8">
<style type="text/css">
.div1 {
background-color: pink;
width: 400px;
height: 400px;
position: relative;
}
.div2 {
background-color: cornflowerblue;
width: 200px;
height: 200px;
position: absolute;
top: 10;
right: 10;
}
.div3 {
background-color: greenyellow;
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<main>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</main>
</body>
</html>O resultado é esse: https://i.imgur.com/rtr3NUe.png
Nesse caso, eu achei que a div2 (azul) ficaria com 10px de distância do elemento onde ele está inserido, dado que ele começaria a contar de acordo com a localização dele próprio.
Entendi o motivo da div3 estar como ela está: o position dela está absolute e será calculado a partir da div pai dele (que seria a div1, a rosa).
Mas não entendi porque a div2 não teve a sua medida alterada. Alguém poderia me ajudar com esse dúvida? Inclusive, nas ferramentas de desenvolvedor do Chrome as propriedades top e right aparecem riscadas, mas o motivo de não serem ok para esse caso não fica bem explícito.
Obrigado!
