我有 2 个 div，一个父级和一个子级，它们都有固定的宽度，子级也有固定的高度，子级 div 向左浮动，它有 box-shadow:0 1px 2px 0 rgba(0,0, 0,0.4) 问题是父 div 与子元素的左阴影重叠。
我无法将 margin-left 添加到子元素，因为它的左侧与父 div 上方的菜单 div 的左侧对齐，因此它必须正好位于它所在的位置。
我尝试了 z-index、父级的负边距以及许多其他我什至无法计算的东西，但似乎没有什么可以解决问题。 代码是:
#menu {
width: 100%;
height: 50px;
background: #252525;
margin: 0 auto 20px auto;
}
#wrapper {
background: #CCC;
width: 1195px;
margin: 0 auto;
clear: both;
overflow: auto;
background: none;
position: relative;
}
#wrapper {
overflow: hidden;
}
#db_left,
#db_right,
#db_center {
margin-right: 30px;
float: left;
}
#db_left {
width: 170px;
position: relative;
}
#db_right {
margin-right: 0 !important;
width: 315px;
}
#db_center {
width: 650px;
margin-top: 20px !important;
}
#profpic_holder {
width: 150px;
height: 150px;
padding: 10px;
position: relative;
float: left;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}<body>
<div class="wrapper">
<div class="header">
Some Content...
</div>
<div id="db_left">
<div id="profpic_holder">
<img src="#" width="150" height="150" alt="" />
</div>
<div id="profname">
</div>
</div>
<div id="db_center">
</div>
<div id="db_right">
</div>
</div>
</body>最佳答案
已修复。
#wrapper 是overflow:hidden 所以在它的区域之外的任何东西都看不到，包括 child 的影子。
我所要做的就是只隐藏其顶部和底部的溢出，所以我这样做了:
#wrapper{
overflow-y:hidden;
}
关于css - parent 重叠 child 的盒子阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15249443/