javascript - Z-index 后文字不会出现在图片前面

Question

我试图在一些图片前面添加一个文本标签: http://codepen.io/jzhang172/pen/YXoWZa

$(function(){

var aud = document.getElementById("audio");
aud.volume = 0.01;



$( "i" ).click(function() {
var elementheight= document.querySelector(".overlay").offsetHeight;
console.log(elementheight);
	if(elementheight == 430)
{
	
	$( "p.more" ).fadeToggle( "slow" );

	$(".overlay").animate({

height:"-=50"
},800);

} 

else{
$(".overlay").animate({

height:"+=50"
},800);
setTimeout(function(){
	$( "p.more" ).fadeToggle( "slow" );
},1000);

}
}); //End .click


//Check if element exists
/*if ($('.overlay').length > 0) {
  console.log(".overlay".length);
}*/
});

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 8rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
  position: relative;
}
.phone {
  position: relative;
  max-width: 80%;
  margin: 3rem auto -12rem;
}
.phone + .phone {
  display: none;
}

/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
  background-image: url('../img/values-bg.jpg');
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
}
.value-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: .8;
  font-weight: 300;
}

/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
  border-bottom: 1px solid #ddd;
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
  background-image: url('../img/values-bg.jpg');
  background-size: cover;
  color: #fff;
}
.categories .section-description { 
  margin-bottom: 4rem;
}

/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 2.4rem;
    z-index:100;
  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem; z-index:100;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
  .categories {
    padding: 15rem 0 8rem;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem; z-index:100;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
}


.container .row .one-half.column.phones{
  
 width:700px;
  margin-left:350px;
  margin-top:-100px;
}


.tint.two{
 
     position: absolute;
    left:110px;
    top: -250px;
    z-index:1;
}


.tint{
  position:relative;
  width:500px;
  height:400px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  overflow:hidden;
  z-index:6;

}
.tint.first{
  position:relative;
  bottom:100px;
  left:50px;
}
.tint img{
  height:100%;
  width:100%;
  transition: all 1s ease;
}
.tint:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(210, 232, 232, 0.24);
  transition: all .3s linear;
}
.tint.one{
  
     position: absolute;
    right: -100px;
    top: -200px;
    z-index:5;
    overflow:hidden;
}
.tint.one img{
 
  left:-50px;
  width:600px;
}
 .tint.one:before {
    content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(210, 232, 232, 0.24);
  transition: all .3s linear;
 }
.tint:hover:before, .tint.one:hover:before, .tint.two:hover:before 
{ 

  background: none;  transform:scale(1.0);
    -ms-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -webkit-transform:scale(1.0);
    -o-transform:scale(1.0);
     }



 .tint.first:hover img, .tint.one:hover img, .tint.two:hover img{
                /* Making images appear bigger and transparent on mouseover */
                cursor: pointer;
    transform:scale(1.1);
    -ms-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
      -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
    <div class="container">
      <div class="row">
        <div class="one-half column">
          <h4 class="hero-heading">
            Start enjoying your Photographs Now.  From anywhere.
          </h4>
          <a class="button button-primary" href=""target="_blank">Try it</a>
        </div>

        <div class="one-half column phones">
          
          <a href=""> 
            <div class="tint first">
           <img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png">
             </div>
           </a>
          <a href="">
            <div class="tint one">
            <img src="http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png">
          </div>
          </a>
          
          <a href="">
            <div class="tint two">
          <img src="img/3.jpg">
        </div>
        </a>
        </div>
      </div>
    </div>
  </div>

从结果可以看出，部分文字被图片遮住了。我尝试在很多地方添加 z-index，例如 h4 css 规则，但没有成功。我的理解是css规则定位和z-index有很大关系，但是我在z-index中加上了position:relative/absolute还是没找到解决办法。非常感谢。

Answer 1

.hero-heading 工作的相对位置。像这样添加。

.hero-heading {
    font-size: 2.4rem;
    z-index: 100;
    position: relative;
}