Стили Divs - Drop Shadow через середину другого div
Я пытаюсь создать стили CSS, которые выглядят как флип-счетчик, но на самом деле не работают как единое целое. У меня есть общий вид и ощущение, что я понял, но я не могу заставить свою тень от коробки перекрывать номер дисплея.
Это то, что я до сих пор:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>
Как я уже сказал, моя самая большая проблема заключается в том, что я не могу заставить мой.shadow div показываться поверх числа.
1 ответ
Решение
Добавьте "position: относительный" к.shadow для z-index для включения:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
position: relative;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>