Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Position: relative no Header <> dúvida

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Absolute mais a fundo e atividade Problema nas palavras-chave

por Benício Daniel
| 187.9k xp | 63 posts

Estou com uma dúvida que deve ser bem comum por aqui, mas gostaria de saber se estou fazendo certo. Eu tive que deixar as palavras mais ou menos desse jeito: https://imgur.com/TJGzAR9 para poder acontecer isso: https://imgur.com/fb83MYF

Eu coloquei o "relative" na posição do header e vi que as palavras ficavam sobrepondo a imagem e o texto. E daí alterei as porcentagens das palavras. Não teria como as palavras ficarem assim: https://imgur.com/BIOVQwr e quando redimensionasse, não sobrepusessem a imagem?

7 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Benicio tudo bem?

Coloca na imagem uma propriedade do css chamada z-index com o valor bem alto . Essa propriedade que controla quem fica na frente , quem fica atrás.

Espero ter ajudado!!!

por Benício Daniel
| 187.9k xp | 63 posts

Opa! Tudo bem!

Eu testei aqui o z-index na classe "foto-home" que é da imagem e não funcionou.

Testei na classe "palavra-home" jogando um "-1" no zindex pra ver se as palavras iriam para trás do background color e deu certo. Daí fui testar na imagem e não mudou nada.

Por que será??

por Benício Daniel
| 187.9k xp | 63 posts

HTML

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>João da Silva - Desenvolvedor Web</title>
    <link rel="shortcut icon" href="img/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/siteestilo.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap">
</head>

<body>

    <header class="titulo-principal">
        <img class="foto-home" src="img/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>

        <ul>
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>


    </header>

    <main>
        <section class="secao-inicio saudacao">
            <p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
            <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
        </section>


        <section class="secao-inicio trabalhos">
            <h2>Trabalhos</h2>
            <ul>
                <li><img src="img/bmw.png" alt="Site da BMW"></li>
                <li><img src="img/ibm.png" alt="Site da IBM"></li>
                <li><img src="img/uol.png" alt="Site da UOL"></li>
            </ul>
            <a class="botao-index" href="portfolio.html">Veja mais</a>
        </section>


        <section class="secao-inicio blog">
            <h2>Blog</h2>
            <small>Últimos posts</small>
            <ol>
                <li>
                    <a href="blog.html">O essencial de design responsivo</a>
                    <p class="inicio-post">
                        Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
                    </p>
                </li>
                <li>
                    <a href="blog.html">Por que fazer páginas acessíveis?</a>
                </li>
                <li>
                    <a href="blog.html">JavaScript não obstrusivo</a>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>

    </main>

    <footer>
        <h2>Vamos conversar?</h2>
        <p>Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>
    </footer>

</body>
</html>
solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Hum, o z-index só funciona com elementos com position: absolute, position: relative, position: fixed, or position: sticky

Se quiser pode colocar a pasta do seu projeto no github para eu dar uma olhadinha e ver o que está acontecendo.

por Benício Daniel
| 187.9k xp | 63 posts

CSS

.foto-home {
    height: 200px;
    margin: 1rem;
    margin-bottom: 0em;
    z-index: -1;
}

header {
    position: relative;
}

.titulo-principal {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding-bottom: .5rem;
    border-bottom: .5rem solid #000;
    position: relative;

}

.titulo-principal h1 {
    font-size: 3rem;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    text-transform: uppercase;
}

.subtitulo-principal {
    font-size: 1rem;
    text-align: center;
    text-transform: none;
    font-family: "Open Sans Condensed", sans-serif;
}


.secao-inicio {
    padding: 2em;
}

.saudacao p {
    color: #99A;
    line-height: 1;
    padding: 3em;
    font-size: 1.5em;
}
.saudacao-inicio {
    color: #889;
    font-size: 3em;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    color: #000;
    font-size: 2em;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
}
.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 40ch;
    display: block;
    text-align: center;
    padding: .5em;
    font-size: 1.25em;
    text-align: center;
    margin: 2em auto;
}


/* tive que colocar aquiiiiiiiii */
.secao-inicio {
    padding: 2em;
}


.secao-inicio h2 {
    text-transform: uppercase;
    font-size: 3em;
    margin-bottom: .5em;
    text-shadow: 2px 2px #000;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
}
.trabalhos h2 {
    color: #FFF;

}
.trabalhos ul {
    overflow: hidden;
    border: .5em solid black;

}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    border-bottom: .5em solid #851944;
    position: relative;
}

.blog h2 {
    color: #FFF;
}

/* TIVE QUE COLOCAR AQUI TBM*/
.blog small {
    position: relative;
    top: -2em;
    color: #FFF;
}

.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}

.inicio-post {
    background-color: #FFF;
    position: absolute; /* ABSOLUTO EM RELAÇÃO AO .BLOG */
    top: 3em;
    right: 3em;
    height: 6em;
    padding: 1em;
    left: 30%;
}

footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
}

/* TIVE QUE COLOCAR AQUI TBM*/
footer h2 {
    font-size: 3em;
}

footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}

li.palavra-home {
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-size: 1em;
    font-weight: bold;
    color: #D5447E;

}

.eficiencia{
    top: 30%;
    left: 75%;
}

.boas-praticas {
    top: 80%;
    left: 5%;

}

.codigo-limpo {
    top: 45%;
    left: 5%;
}

.css3 {
    top: 50%;
    left: 20%;
}

.html5 {
    top: 40%;
    left: 80%;
}

.javascript {
    top: 10%;
    left: 75%;
}

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

.responsivo {
    top: 15%;
    left: 20%;
}

.otimizacoes {
    top: 60%;
    left: 85%;
}

.agilidade {
    top: 8%;
    left: 20%;
}

.design {
    top: 35%;
    left: 85%;
}
por Benício Daniel
| 187.9k xp | 63 posts

OPA! Deu certo! Eu não tinha especificado a posição!!

Obrigado.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Disponha e bons estudos!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software