Overlapping Divs without using position:Absolute property

Asked

Viewed 127 times

0

I’m putting together the following layoutinserir a descrição da imagem aqui

and I couldn’t find any way to override the Ivs without having to use the position: Absolute. I cannot make use of this property, as this is just a Section in between several others, and a position:Absolute would spoil the layout. I have tried using position:relative and z-index in div, but I was unsuccessful. Follows code for better understanding of the structure:

.about-img{
width:40%;
height:450px;
float:left;
z-index:1;
background-image:url(../img/about.jpg);
background-size:cover;
position:relative;
z-index:0;
}
.about-img img{
width:100%;
height:auto;

}
.about-text{
position:relative;
z-index:1;
float:right;
width:70%;
height:400px;
margin-top:20px;
padding:30px;
background-color:#fff;
-webkit-box-shadow: 5px 5px 10px 0px rgba(196,196,196,1);
-moz-box-shadow: 5px 5px 10px 0px rgba(196,196,196,1);
box-shadow: 5px 5px 10px 0px rgba(196,196,196,1);
}

html:

<section id="about" >
            <div class="container">
                <div class="row">
                    <div class="sec-title text-center">
                        <h2 class="wow animated bounceInLeft">Quem Somos</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="about-img">

                        </div>
                        <div class="about-text">
                            <span>AIR Soluções em Pesquisa e Tecnologia!</span>
                            <p><span>AIR soluções em pesquisa e tecnologia</span> é uma empresa que prima pela excelência, o bom trabalho, o capricho em tudo que faz.
                            Temos como um de nossos principais objetivos, o de superar a cada dia que passa nossas marcas e feitos que neste pouco tempo de
                            história já são consideráveis.</p>

                            <p>Nunca nos contentamos com o básico, com o que já nps tornamos ou conquistamos, queremos sempre mais desafios para que possamos
                            vencê-los, crescendo profissonalmente e adquirindo maior experiência e conhecimento.</p>

                            <p>Nossos profissionais adoram o que fazem, pois nós da <span>AIR</span> que o sucesso está estampado em todo e qualquer detalhe
                            ,por menor que este seja. Desde o simples fato de estar feliz fazendo o que gosta até tomar decisões importantes para o futuro, baseado
                            neste conceito de melhoria contínua de qualidade.</p>

                            <p>Apaixonados pelo que fazemos, este é nosso conceito e de todos aqueles que se relacionam com a <span> AIR </span>.
                            Por isso desafiamos você a nos desafiar, certamente você irá se surpreender!</p>

                            <p>Venha tomar um café para discurtirmos seu novo projeto na área de TI!</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 wow animated zoomIn">
                        <div class="about-item">
                            <img src="img/icons/icon_mission.png">
                            <h3>Missão</h3>
                            <p>Ser <span>pioneira</span> no desenvolvimento de <span>Soluções tecnológicas</span> trazendo
                            além da <span> confecção de produtos de TI</span> a <span>orientação</span> necessária para utilizar
                            estes <span>recursos</span>.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wow animated zoomIn">
                        <div class="about-item">
                            <img src="img/icons/icon_vision.png">
                            <h3>Visão</h3>
                            <p>Se consolidar como <span>empresa     desbravadora</span>e<span>ponto de referência</span>
                            para novas <span>tendências de         mercado</span>.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wow animated zoomIn">
                        <div class="about-item">
                            <img src="img/icons/icon_values.png">
                            <h3>Valores</h3>
                            <p><span>Respeito por todos</span></br>
                                Espírito de trabalho em equipe</br>
                                <span>Pioneirismo</span></br>
                                Ética
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

1 answer

0

Solved! I was able to do what I wanted by creating an extra div, encompassing the div about-text, and having the building image as background-image.inserir a descrição da imagem aqui

follows new html

<div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="about-img">
                            <div class="about-text">
                                <span>AIR Soluções em Pesquisa e Tecnologia!</span>
                                <p><span>AIR soluções em pesquisa e tecnologia</span> é uma empresa que prima pela excelência, o bom trabalho, o capricho em tudo que faz.
                                Temos como um de nossos principais objetivos, o de superar a cada dia que passa nossas marcas e feitos que neste pouco tempo de
                                história já são consideráveis.</p>

                                <p>Nunca nos contentamos com o básico, com o que já nps tornamos ou conquistamos, queremos sempre mais desafios para que possamos
                                vencê-los, crescendo profissonalmente e adquirindo maior experiência e conhecimento.</p>

                                <p>Nossos profissionais adoram o que fazem, pois nós da <span>AIR</span> que o sucesso está estampado em todo e qualquer detalhe
                                ,por menor que este seja. Desde o simples fato de estar feliz fazendo o que gosta até tomar decisões importantes para o futuro, baseado
                                neste conceito de melhoria contínua de qualidade.</p>

                                <p>Apaixonados pelo que fazemos, este é nosso conceito e de todos aqueles que se relacionam com a <span> AIR </span>.
                                Por isso desafiamos você a nos desafiar, certamente você irá se surpreender!</p>

                                <p>Venha tomar um café para discurtirmos seu novo projeto na área de TI!</p>
                            </div>
                        </div>
                        <!-- <div class="about-img"> -->

                        <!-- </div> -->
                        <!-- <div class="about-text"> -->
                            <!-- <span>AIR Soluções em Pesquisa e Tecnologia!</span> -->
                            <!-- <p><span>AIR soluções em pesquisa e tecnologia</span> é uma empresa que prima pela excelência, o bom trabalho, o capricho em tudo que faz. -->
                            <!-- Temos como um de nossos principais objetivos, o de superar a cada dia que passa nossas marcas e feitos que neste pouco tempo de -->
                            <!-- história já são consideráveis.</p> -->

                            <!-- <p>Nunca nos contentamos com o básico, com o que já nps tornamos ou conquistamos, queremos sempre mais desafios para que possamos -->
                            <!-- vencê-los, crescendo profissonalmente e adquirindo maior experiência e conhecimento.</p> -->

                            <!-- <p>Nossos profissionais adoram o que fazem, pois nós da <span>AIR</span> que o sucesso está estampado em todo e qualquer detalhe -->
                            <!-- ,por menor que este seja. Desde o simples fato de estar feliz fazendo o que gosta até tomar decisões importantes para o futuro, baseado -->
                            <!-- neste conceito de melhoria contínua de qualidade.</p> -->

                            <!-- <p>Apaixonados pelo que fazemos, este é nosso conceito e de todos aqueles que se relacionam com a <span> AIR </span>. -->
                            <!-- Por isso desafiamos você a nos desafiar, certamente você irá se surpreender!</p> -->

                            <!-- <p>Venha tomar um café para discurtirmos seu novo projeto na área de TI!</p> -->
                        <!-- </div> -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 wow animated zoomIn">
                        <div class="about-item">
                            <img src="img/icons/icon_mission.png">
                            <h3>Missão</h3>
                            <p>Ser <span>pioneira</span> no desenvolvimento de <span>Soluções tecnológicas</span> trazendo
                            além da <span> confecção de produtos de TI</span> a <span>orientação</span> necessária para utilizar
                            estes <span>recursos</span>.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wow animated zoomIn">
                        <div class="about-item">
                            <img src="img/icons/icon_vision.png">
                            <h3>Visão</h3>
                            <p>Se consolidar como <span>empresa desbravadora</span>e<span>ponto de referência</span>
                            para novas <span>tendências de mercado</span>.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wow animated zoomIn">
                        <div class="about-item">
                            <img src="img/icons/icon_values.png">
                            <h3>Valores</h3>
                            <p><span>Respeito por todos</span></br>
                                Espírito de trabalho em equipe</br>
                                <span>Pioneirismo</span></br>
                                Ética
                            </p>
                        </div>
                    </div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.