Menu
I'm stuck in a problem, I want to show the relative element in front of absolute element, I know z-index don't work with relative elements. How can I show the image in front of the strip.
http://jsfiddle.net/Q9EEv/9/
<!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/
Absolute element is strip so I want it on back on that relative image.
Thanks
555
Here you go: http://jsfiddle.net/Q9EEv/10/
.content-b img
{
position: relative;
}
You solved it your self. But z-index does work on every positioned element (not static).
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
