Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meireles Hugo

Posição de conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

Meireles Hugo    0

Meireles Hugo
Postado

ola malta.

será que alguém me pode ajudar a resolver um problema de posição passo a explicar.

 

Tenho esta estrutura: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slide</title>
</head>
<body>
    <section id="works">
        <div id="esq">&#60;</div>
        <div id="dir">&#62;</div>
        <div class="wrap-slide">
            <div class="col">
                <img src="img/work.png" alt="">
                <div class="conteudo">
                    <h2>Titulo</h2>
                    <p>Tecnologias utilizadas:HTML + CSS + JAVASCRIPT</p>
                    <p>Descrição</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis eos sapiente unde repellendus, fugiat eius itaque dolorem perspiciatis sunt eaque.
                    </p>
                </div>
            </div>
            <div class="col reverse">
                <img src="img/work.png" alt="">
                <div class="conteudo">
                    <h2>Titulo</h2>
                    <p>Tecnologias utilizadas:HTML + CSS + JAVASCRIPT</p>
                    <p>Descrição</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis eos sapiente unde repellendus, fugiat eius itaque dolorem perspiciatis sunt eaque.
                    </p>
                </div>
            </div>
            <div class="col">
                <img src="img/work.png" alt="">
                <div class="conteudo">
                    <h2>Titulo</h2>
                    <p>Tecnologias utilizadas:HTML + CSS + JAVASCRIPT</p>
                    <p>Descrição</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis eos sapiente unde repellendus, fugiat eius itaque dolorem perspiciatis sunt eaque.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section id="texto">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi minus fuga totam animi quae tempore sapiente, voluptates excepturi laudantium iusto dicta dolores facere ut, obcaecati cupiditate aut, odio unde eaque explicabo quisquam? Cum possimus doloribus numquam eius. Voluptatum impedit recusandae necessitatibus dolorem itaque at reprehenderit, soluta hic praesentium, libero architecto ut sint corrupti non voluptatem! Consequuntur, maxime blanditiis. Voluptatem accusantium, harum consequatur ipsa libero perspiciatis quisquam nesciunt numquam in eveniet corrupti iure quas odio mollitia voluptatum molestiae, veniam recusandae suscipit inventore vel hic! Totam eveniet dolorem reiciendis cum, nam doloribus itaque id maxime repellendus deserunt, inventore quis vero. Aut vitae nesciunt minima sit officia enim! Laborum placeat incidunt, aliquam nemo, quas eaque porro obcaecati cum totam nisi excepturi illo quos magnam sit quis officiis fugiat exercitationem voluptas rem sequi, officia accusantium quo velit! Libero tenetur, iusto dolorum magni aspernatur in nesciunt fugit laboriosam consequatur reiciendis illum nulla ullam accusamus dolor cum est assumenda. Molestias tenetur quod, vitae ducimus voluptates deserunt ipsa ipsum dignissimos facere sint! Harum possimus repudiandae impedit earum sequi qui voluptas debitis officiis iste, ratione, quas quisquam veritatis maiores sapiente neque numquam inventore commodi natus, consectetur amet exercitationem ipsa. At, ipsam impedit aliquid in tenetur doloribus molestiae vero!</p>
    </section>
    
</body>
</html>

e este o css: 

<style>
        *{box-sizing: border-box;}
        html, body {margin: 0; padding: 0;}
        img {max-width: 100%;}
        #works {max-width:400px; position: relative; margin: 0 auto;}
        .col {
            position: absolute;
            top:0;
        }
        .conteudo {max-width: 300px;}
        #texto {position: relative;}
    </style>

Então o meu problema é ao colocar a .col em posição absolute a section com o texto sobe e fica por cima da imagem a ideia é dar absolute para poder fazer slide com as 3 .col por isso dou absolute .

alguem me pode ajudar como resolvo o problema para o texto ficar por baixo da section works ? de modo fluido sem ser fazer top: xx px; 

agradeço ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado
5 horas atrás, Meireles Hugo disse:

...para o texto ficar por baixo da section works ?

Declare a propriedade CSS   z-index   com um índice alto para   .col   como mostrado a seguir 

.col {
  position: absolute;
 top: 0;
 z-index: 1000 /* <======= */
}

Nota:

"ola malta."

https://www.dicio.com.br/malta/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito