я работаю над этим: fiddleBox тень одного DIV на другой
<div id="headDiv">
<h1 id="headh1">Welcome</h1>
</div>
<div id="container">
</div>
Я хочу, чтобы тень приветствия DIV на контейнерных делах. так что это будет выглядеть так, как показано над контейнером div. Прямо сейчас, когда вы видите, что тень на теле, но бот на контейнере div.
помощь.
Добавить position:relative; в ваш #headDiv в CSS.
Пробовали и это работает ...
Вы сделали почти все, что необходимо, чтобы быть сделано. Вы забыли о позиции и 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>г-индекс не требуется Вот. Также для справки значение индекса z является нереалистичной и плохой практикой. Пожалуйста, используйте лучшую ценность в будущем. Значения – jbutler483
@ jbutler483 предназначены только для иллюстрации примера. С моей точки зрения, z-index требуется, если у вас сложный сайт. – ummahusla
К сожалению, я считаю, что вы ошибаетесь. Z-index здесь не требуется, и я настоятельно рекомендую использовать реалистичные z-значения *, если * я собирался их использовать. В этом случае, однако, они вообще не требуются. – jbutler483
Проблема в других решений является то, что в оригинальном виде, контейнер скрывает часть головы, так что если вы кладете голову над контейнером (который необходим, чтобы получить тень) вы разрушите предыдущий эффект.
Вместо этого, поддельные тень на сам контейнер с
.container {
box-shadow: inset 0px 10px 7px -7px blue;
}
body{
\t padding: 0;
\t margin: 0;
\t background-color:#faf6eb;
}
#headDiv{
\t width:90%;
\t height:130px;
\t margin-top:0px;
\t border-radius: 0px 0px 10px 10px;
\t box-shadow: 5px 5px 5px black;
\t background-color: #354458;
\t margin: 0 auto;
\t vertical-align: middle; \t
}
#headh1{
\t font-size: 3em;
\t font-family: "Comic Sans MS";
\t font-weight: bold;
\t margin: 0px;
\t padding: 30px;
\t color: #E6E6E6;
\t text-shadow: 5px 5px 5px black;
}
#container{
\t width:88%;
\t margin: 0 auto;
\t height: 300px;
\t background: #9DC0CB;
\t margin-top: -10px;
box-shadow: inset 0px 10px 7px -7px blue;
}<div id="headDiv">
\t \t \t <h1 id="headh1">Welcome</h1>
\t \t </div>
\t \t
\t \t <div id="container">
\t \t \t
\t \t </div>
http://jsfiddle.net/jbutler483/ye7cndxz/3/ – jbutler483