html – CSS Box-Shadow div overlay

概述我有一个盒子阴影的问题,被另一个div遮挡. 这是我的代码： HTML的 <div id="wrap"> <div id="header"> <div id="nav"></div> </div> <div id="main_content"></div> <div id="footer"></div> 我有一个盒子阴影的问题,被另一个div遮挡.

这是我的代码：

HTML的

<div ID="wrap">        <div ID="header">            <div ID="nav"></div>        </div>          <div ID="main_content"></div>        <div ID="footer"></div>    </div>

css-

body{    margin:0;}#wrap{    margin:0 auto;    wIDth:84%;}#header{        background-image:url(img/header_pattern.png);    background-repeat:repeat;    margin:0 auto;    wIDth:100%;    height:170px;    Box-shadow:5px 5px 5px black;    z-index:1;}#main_content{    background-image:url(img/main_pattern.png);    background-repeat:repeat;    wIDth:100%;    min-height:700px;    height:100%;    z-index:2;}

Screenshot-

http://i.stack.imgur.com/TfDyi.png

我怎样才能使阴影不会“堆叠在”(在z轴上),因此被#main_content div遮挡,但仍然在我的#wrap中？

谢谢.

不,我不只是想推倒#main_content.

解决方法 只需添加：

position: relative;

致#header {

例：
http://jsfiddle.net/kJajC/

总结

以上是内存溢出为你收集整理的html – CSS Box-Shadow div overlay全部内容，希望文章能够帮你解决html – CSS Box-Shadow div overlay所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。