Image positioning with z-index

Question

Image positioning with z-index

Navigation

#1 by (1 votes)

0

I'm trying to position a text box on an image through z index, to get something like this: link

At this point the text appears after the image (since it is in a div with 100% width). I wanted the text to appear superimposed on the image.

What am I doing wrong? Thanks

My code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#intro {
    width:100%;
    float:left;
    padding-right:3%;
    padding-top:3%;
    padding-bottom:3%;
    background-repeat:no-repeat;
    background-size:100%;
    position:relative;
    z-index:50;
}
.txt_ilustracao {
display:block;
width:38%;
margin: 7% 3% 3% 7%;
float:right;
color:black;
background-color: rgba(255, 255, 255, 0.6);
padding:5%;
position:relative;
z-index:100;
}
.txt_ilustracao1 {
font-size:2.5em;
margin-top: 10%;
margin-bottom:3%;
text-align:center;
}
.txt_ilustracao2 {
font-size:1.8em;
margin-top:9%;
text-align:center;
}
</style>

     <div id="intro"><img src="IMGS/index_fundo_pb.jpg"></div>

          <div class="txt_ilustracao">

                      <div class="txt_ilustracao1">
                    asdfgcvhbjklçjh erdtfyguhijopoçlikujhtgrfed<br>
                    asdfgcvhbjklçjh erdtfyguhijopoçlikujhtgrfed <br>
                    asdfgcvhbjklçjh erdtfyguhijopoçlikujhtgrfed</div>
                        <div class="txt_ilustracao2">asdfgcvhbjklçjh         erdtfyguhijopoçlikujhtgrfed
                       asdfgcvhbjklçjh erdtfyguhijopoçlikujhtgrfed.<br><br>
                      asdfgcvhbjklçjh erdtfyguhijopoçlikujhtgrfed</div>


   </div> <!-- intro -->

css z-index

asked by anonymous 08.04.2015 / 19:07

1 answer

IF condition in jQuery Problems with XMLHttpRequest AngularJS

score 1 · Answer 1

Just a few simple adjustments, come on:

In your html code, <div class="txt_ilustracao"> becomes the child of <div id="intro"> . With this, we will control the positioning of the photo caption, respecting the limits (dimensions) of its imagem . Here is the code below:

HTML

<div id="intro">
  <img src="IMGS/index_fundo_pb.jpg" width="750" height="600">
  <div class="txt_ilustracao">
    <h2>What is Lorem Ipsum.</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

In your css code, make the following adjustments:

CSS

#intro {
  position: relative; /* Para que a posição da legenda(txt_ilustracao), dependa das dimensões de #intro */
  float: left; /* Para se ajustar às dimensões da img */
}
.txt_ilustracao {
  width:38%;
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute; /* Para flutuar por cima da div#intro e tê-la como referência para 'caminharmos' pelos eixos x e y */
  text-align: center;
  padding: 20px;
  right: 30px; /* Alinha o box à direita com uma distância de 30px do limite da div#intro */
  top: 50%; /* Coloca o box na posição 0 do eixo y da div#intro */
  margin-top: -25%; /* Recua 25% da altura para que o box fique centralizado no eixo y da div#intro. Independente da altura da imagem ou do box de legenda, o elemento sempre estará centralizado no eixo y. */
}
.txt_ilustracao h2 {
  /* Propriedades do título */
}
.txt_ilustracao p {
  /* Propriedades do parágrafo */
}

See how you got in the Demo .