.mais-recente{
position: relative;
}
.inicio-post{
width: 80ch;
height: 10ch;
position: absolute;
position: fixed;
right: ;
bottom: 60%;
background-color: #F2FFFC;
color: black;
padding: .5em;
}
.blog a {
color: #F26;
width: 40%;
background-color: #F2FFFC;
}
.inicio-post{
display:none;
}
.blog a:hover ~.inicio-post, .blog a:focus ~.inicio-post{
display:block;
}
.blog a:hover, .blog a:focus{
background-color:#F2FFFC;
color: #26;
}
Boa tarde!
Conforme solicitado pelo exercício, criei 3 quadros que aparecem conforme o mouse passa por cima do link correspondente (ou o Tab). No entanto, os quadro se posicionam locais diferente da tela (O certo era aparecerem sempre no mesmo lugar, como se estivessem um em cima do outro, porem escondidos), e quando a tela está muito grande alguns dos 3 quadros nem aparecem. Como faço para que todos os quadros apareçam exatamente no mesmo local sempre e como faço para que isso aconteça mesmo quando o usuário der zoom no navegador?