how to hidden image over image in css - html

Question

This is my code:
<div id="wrapper">
<header>
<div id="header">
<img src="http://s22.postimg.org/vdwnuxg4x/logo.png" alt="logo" />
</div>
<div class="header-content">
<img src="http://s22.postimg.org/tndmtfylt/banner.png" alt="banner" />
<div class="issue">
<img class="issue-image-1" src="http://s22.postimg.org/jniqdjncd/issue_no_img.png" alt="issue" />
<span class="issue-no">Issue No.<br /><b>376</b></span>
</div>
<div class="header-content-center">
<p>
<span class="new">NEW!</span>
<date>JUN O7,2013</date>
</p>
<p><i>Get your breakpoints on.</i></p>
<h1 class="h1-clear">DOT NET ARTICLES</h1>
<p><i>by</i> <a class="jon" href="#"> JOHN WOO</a><i>-10 comments</i></p>
<form>
<input type="search" placeholder="Search.."/>
</form>
</div>
</div>
<hr class="hr-style" />
</header>
This is my jsfiddle:
http://jsfiddle.net/vas4bxu5/
here banner.png and issue_no_img.png are displayed in header, it shows, backside of issue image, there is display of banner image, i want to hidden that .
I used z-index:9999; or z-index:-9999; , still nothing change.
May i know what is the exact css property to fix this.

Answer 1

You need to change some styles and by the way z-index works with positioned elements, change your CSS like following:
.issue
{
width: 23px;
height: 50px;
float:left;
position:relative; /* added this */
}
.issue-no
{
color: #fff;
font-size: 16px;
font-weight: 700;
left: 30px; /* updated this */
position: absolute;
top: -80px; /* updated this */
line-height: normal;
}
Demo