Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resultado igual com postition: relative

Bom fiz os testes com e sem o positition: relative e o resultado quando aplico o zoom e o mesmo em ambos os casos, a unica diferença seriam as porcentagens usadas para posicionar os elementos no reader.

CSS:

header{
    position: relative;
}
.palavra-home{
    position: absolute;
    font-family: 'Shadows Into Light', cursive;
    color: #D5447E;
    font-weight: bold;
}

.eficiencia{
    top:20%;
    left: 25%;
}
.boas-praticas{
    top: 40%;
    left: 10%;
}
.codigo-limpo{
    top: 75%;
    left: 22%;
}
.css3{
    top: 10%;
    left: 5%;
}
.html5{
    top: 50%;
    left: 30%;
}
.javascript{
    top: 85%;
    left: 8%;
}

.acessibilidade{
    top: 10%;
    right: 30%;
}

.responsivo{
    top:30%;
    right: 5%;
}

.otimizacoes{
    top: 60%;
    right: 20%;
}

.agilidade{
    top:45%;
    right: 30%;
}

.design{
    top: 90%;
    right: 5%;
}

Prints:

Zoom a 33%

Zoom a 100%

Zoom a 175%

1 resposta
solução!

A ideia não é dar zoom, mas sim redimensionar a janela. Faça o teste deixando o seu navegador parcialmente maximizado.

Além disso, ao usar o position: relative, as tags <li> de cada palavra não saem do fluxo das tags. Pode ter o visual igual, mas não é a mesma coisa. Cada um dos jeitos tem suas consequências.