CODEWITHSUNDEEP
htmlcss
fildred13
fildred13

Reputation: 2350

Box-shadow over image?

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);
}

Upvotes: 4

Views: 14164

Answers (3)

vasu naman
vasu naman

Reputation: 11

You can use 

 position: absolute;

in the content div and then manage it using right and left..

Upvotes: 0

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

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 :)

Upvotes: 10

brbcoding
brbcoding

Reputation: 13586

Give your #navigation id some kind of positioning... That's a requirement to use z-index..

#navigation {
    position: absolute;
    width:100%;
    z-index: 10;
}

DEMO

Upvotes: 3

Related Questions