I have encountered an issue where I need to display a relative element in front of an absolute element. I am aware that z-index does not work with relative elements. Is there a way for me to show the image in front of the strip?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teset</title>
<style>
.container {
width: 1170px;margin:auto
}
.footer-elements{text-align:center;bottom:0;height:15em}
.footer-elements .content-b{text-align:center;position:relative;height:10em}
.footer-elements .content-b img.main-img{text-align:center;width:18em;margin-top:-3em}
.footer-elements .content-b .strip-m{background:#231F20;height:9em;}
.footer-elements .content-b .strip-border{width:100%;height:1.3em;position:absolute;top:0;left:0%;background-size:auto 100%;
background:url(http://i666.photobucket.com/albums/vv22/SincerelyBerry/HAIJYNX/backgrounds/stripes.png) repeat-x;}
</style>
</head>
<body>
<!-- container Start -->
<div class="container">
<br><br><br><br><br><br><br>
<div class="footer-elements">
<div class="content-b">
<div class="strip-m row">
<div class="strip-border"></div>
<img src="http://i252.photobucket.com/albums/hh15/liveyourlife815/stripes-1.png" class="main-img" alt="footer">
</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/Q9EEv/9/
The absolute element is the strip, and I want it behind the relative image.
Thank you