سلام . من میخوام همچین چیزی بسازم :

کد HTML:
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
کد HTML:
.box1{
width:700px;
height:100px;
background-color:red;
box-shadow: 0 10px 2px 0 black;
z-index:2;
}
.box2{
width:700px;
height:100px;
background-color:green;
z-index:1;
}
طبق دستور بالا ما دوتا Box داریم - box1 بالای box2 هستش . من به box1 خاصیت box-shadow میدم و براش یک سایه ایجاد میکنم - ولی میخوام سایه رویه box 2 قرار بگیره نه زیرش - سایه ای که با خاصیت box-shadow زدم رفته زیر box2 که من میخوام بیفته روش - برای همین به box1 خاصیت z-index میدم تا بالا تر قرار بگیره اما عمل نمیکنه ؟ چرا ؟
میخوام سایه ای که برای box1 میزنم رویه box2 قرار بگیره نه بره زیرش - چه کنم دوستان ؟ خیلی ممنون