Как перекрыть блок тенью блоком сверху?

@Levyndra · Регистрация: 17.06.2015

Студворк — интернет-сервис помощи студентам

Как перекрыть блок тенью блоком сверху?
Ну чтобы тень верхнего блока ложилась на нижний. z-index пробовал - не получилось, должно быть какое-то очень простое решение.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</head>
<header class="main-header flex">
    <nav class="main-menu flex">
        <div class="logo">
            <a href="index.html"><img src="img/logo.png" alt="logo" class="img-responsive"></a>
        </div>
        <div class="search-box">
            <form class="flex search">
                <input type="text" placeholder="Поиск по товарам..."> 
                <button type="submit">Найти</button>
            </form>
        </div>
        <div class="phones flex">
            <a href="tel:+375296628732">+375 (29) 153 64 60</a>
            <a href="tel:+375296628732">+375 (44) 153 70 60</a>
        </div>
        <div class="apll-btn">
            <a href="#" class="make-order">Сделать заказ</a>
        </div>
    </nav>
</header>
 
<section class="slider-ad">
    <div class="container">
        <div class="slide"><img src="img/slide_1.jpg" alt="" class="img-responsive"></div>
        <div class="slide"><img src="img/slide_2.jpg" alt="" class="img-responsive"></div>
        <div class="slide"><img src="img/slide_3.jpg" alt="" class="img-responsive"></div>
    </div>
</section>
<body>

Ruby
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
@import "fonts"
@import "libs"
@import "base"
@import "vars"
 
%flex-common
    justify-content: space-around
    align-items: center
 
// Пользовательские стили
.main-header
    flex-direction: column
    @extend %flex-common
    width: 100%
    box-shadow: 0px 16px 30px 0px rgba(50, 50, 50, 0.30)
    &::before
        content: ''
        position: absolute
        background: url(../img/strip.png)
        height: 4px
        top: 0px
        width: 100%
 
.main-menu
    position: relative
    width: 100%
    max-width: 1250px
    @extend %flex-common
    padding: 35px 20px
 
.make-order
    padding: 20px 15px
    background-color: $accent
    border-radius: 8px
    outline: none
    text-decoration: none
    color: #fff
    font-weight: bold
    &:hover
        background-color: lighten($accent, 5%)
    &:active
        background-color: darken($accent, 5%)
 
.phones
    flex-direction: column
    & a
        vertical-align: middle
        text-decoration: none
        color: $textdec
        margin: 3px 0px
        &:first-child::before
            content: ''
            display: inline-block;
            background: url(../img/mts.png)
            background-size: cover
            background-position: center
            vertical-align: middle
            margin: 3px 7px 6px 0px
            width: 20px
            height: 20px
        &:last-child::before
                    content: ''
                    display: inline-block
                    background: url(../img/velcom.png)
                    background-size: cover
                    background-position: center
                    vertical-align: middle
                    margin: 3px 7px 6px 0px
                    width: 20px
                    height: 20px
 
.logo
    max-width: 220px
    width: 100%
 
.search
    position: relative
    width: 300px
    margin: 0 auto
    input
        width: 100%
        height: 45px
        padding-left: 10px
        border: 1px solid $textdec
        border-radius: 5px
        outline: none
        color: $textdec
        &:focus
            background: #F9F0DA
    button
        color: #fff
        position: absolute 
        top: 0
        right: 0px
        width: 82px
        height: 45px
        border: none
        background: $accent
        border-radius: 0 5px 5px 0
        cursor: pointer
 
.lnr
    line-height: 0px
    font-weight: 900
 
.lnr-chevron-left
    position: absolute
    z-index: 99
    top: 50%
    left: 200px
    color: $textdec
    opacity: 0
    font-size: 60px
    transition: .5s
    cursor: pointer
 
.lnr-chevron-right
    position: absolute
    z-index: 99
    top: 50%
    right: 200px
    color: $textdec
    opacity: 0
    font-size: 60px
    transition: .5s
    cursor: pointer
 
.container
    &:hover
        .lnr-chevron-left, .lnr-chevron-right
            opacity: .4
            transition: .5s
@import "media"

@novichek_1905 · 18.10.2018, 17:44

Сообщение от Levyndra

Как перекрыть блок тенью блоком сверху?

CSS
1
2
3
4
.main-header{
position: relative;
z-index: 1;
}

@Levyndra · 18.10.2018, 22:02 **[ТС]**

Точно!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Levyndra 0 / 0 / 0 Регистрация: 17.06.2015 Сообщений: 27
	18.10.2018, 22:02 [ТС]
	Точно! 0

Как перекрыть блок тенью блоком сверху?

Решение