Image positioning with z-index

Asked

Viewed 1,606 times

0

I’m trying to position a text box over an image through the z index, to get something like this: http://postimg.org/image/an6lkq9gf/

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

What am I doing wrong? Thank you

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

  • Have you tried with background-image?

  • Yes, but in this case I was interested in having it with the z-index. Thank you

  • And what’s going on?

  • Now the text appears after the image (since it is in a 100% width div). I wanted the text to appear superimposed on the image.

  • In the css class .txt_ilustracao, swap the position:relative for position:absolute and testing.

  • So it was. Thanks Rafael! Now the only problem is the text box. I wanted it to be aligned on the right side (assigns it the float:right). However it is "stuck" on the left side. Any suggestions? Thanks

  • To use z-index the classes should not be inside each other, use a div pro background and one for box, the contents of the box you leave inside the same box div, then the text will float along with the box.

  • For the text box to be aligned to the right use right: 0px;

  • Thank you Carlos, it worked! D

Show 4 more comments

1 answer

1

Just a few simple adjustments, come on:

  1. In its html code, the <div class="txt_ilustracao"> becomes the daughter of <div id="intro">. With this, we control the positioning of the caption of the photo, respecting the limits (dimensions) of your imagem. Follows 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>

  1. In your css code, make the adjustments below:

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 it looks on Demonstration.

Browser other questions tagged css z-index

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