0
I’m putting together the following layout
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>
