Question

我正在研究：fiddle

    <div id="headDiv">
        <h1 id="headh1">Welcome</h1>
    </div>

    <div id="container">

    </div>

我想要容器div上的欢迎div的影子。所以它看起来像是放在容器div上面。现在，你可以看到阴影在身体上，但是容器div上的bot。

帮助。

Answer 1

将position:relative;添加到CSS中的#headDiv。

尝试过它并且有效......

Answer 2

你已经做了几乎所有需要做的事情。你忘记了职位和z-index。

添加position:relative和z-index:99999可以满足您的需求。

body {
  padding: 0;
  margin: 0;
  background-color: #faf6eb;
}
#headDiv {
  width: 90%;
  height: 130px;
  margin-top: 0px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 5px 5px 5px black;
  background-color: #354458;
  margin: 0 auto;
  vertical-align: middle;
  z-index: 9999;
  position: relative;
}
#headh1 {
  font-size: 3em;
  font-family: "Comic Sans MS";
  font-weight: bold;
  margin: 0px;
  padding: 30px;
  color: #E6E6E6;
  text-shadow: 5px 5px 5px black;
}
#container {
  width: 88%;
  margin: 0 auto;
  height: 300px;
  background: #9DC0CB;
  margin-top: -10px;
  z-index: 999;
  position: relative;
}

<div id="headDiv">
  <h1 id="headh1">Welcome</h1>
</div>

<div id="container">

</div>

Answer 3

其他解决方案中的问题是，在原始布局中，容器隐藏了部分头部，因此如果将头部放在容器上方（需要获得阴影），则会破坏之前的效果。

相反，用

伪造容器本身的阴影

.container {
    box-shadow: inset 0px 10px 7px -7px blue; 
}

body{
	padding: 0;
	margin: 0;
	background-color:#faf6eb; 
}
#headDiv{
	width:90%;
	height:130px;
	margin-top:0px;
	border-radius: 0px 0px 10px 10px;
	box-shadow: 5px 5px 5px black;
	background-color: #354458;
	margin: 0 auto;
	vertical-align: middle; 	
}

#headh1{
	font-size: 3em;
	font-family: "Comic Sans MS";
	font-weight: bold;
	margin: 0px;
	padding: 30px; 
	color: #E6E6E6;
	text-shadow: 5px 5px 5px black;
}

#container{
	width:88%;
	margin: 0 auto;
	height: 300px;
	background: #9DC0CB; 
	margin-top: -10px;
    box-shadow: inset 0px 10px 7px -7px blue; 
}

<div id="headDiv">
			<h1 id="headh1">Welcome</h1>
		</div>
		
		<div id="container">
			
		</div>

一个div的盒子阴影到另一个

3 个答案: