Menu
Fiddle: http://jsfiddle.net/G5FaQ/
I have an image contained in a div. A div just next to said image has a box shadow. I want the box-shadow of the div to overlap the image, so it looks like the image is a part of the div it is in, rather than appearing to hover strangely over it. I tried z-index, as you'll see in the fiddle, but that seems to have failed.
HTML:
<body>
<nav id="navigation">
<img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" width="250px" alt="logo">
</nav>
<div id="content_wrapper">
<!-- InstanceBeginEditable name="content" -->
<section id="content">
Content.
</section>
<!-- InstanceEndEditable -->
</div>
</div>
</body>
CSS:
body {
background: #ffd288;
}
/*Nav*/
#navigation {
width:100%;
z-index: 10;
}
.logo {
z-index: 1;
}
/*Content Section*/
#content {
background: #393951;
height: 2000px;
z-index: 10;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
box-shadow: 0px 0px 20px rgba(0,0,0,.8);
}
264
you almost had it! all you need to do is add position absolute or relative to the container! Position relative if you want the container to act like a normal dom element, or absolute if you want it to float freely!
position:relative;
http://jsfiddle.net/G5FaQ/1/
Good luck and let me know if you have another question :)
86
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
