Как наложить блоки друг на друга?

Question

.slider-conteiner {
    padding-left: var(--main-size);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: grid;
}

.slider-img {
    height: 100%;
    width: 75%;
    overflow: hidden;
    position: absolute;
    float: left;
    display: block;
    grid-area: 1/1;
}

.slider-img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(000, 000, 000, .45);
    z-index: 2;
}

.slider-img_slide {
    margin-left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}

.slider-img_bg {
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    display: flex;
}

.slider-text {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    grid-area: 1/1;
    background: transparent;
}

.slider-text__slide {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

 <div class="slider-conteiner">
                <div class="swiper slider-text">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide slider-text__slide">Slide 1</div>
                        <div class="swiper-slide slider-text__slide">Slide 2</div>
                    </div>
                </div>

                <div class="swiper slider-img">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide slider-img_slide">
                            <div class="slider-img_bg" style="background-image: url();"></div>
                        </div>
                        <div class="swiper-slide slider-img_slide" >
                            <div class="slider-img_bg" style="background-image: url();"></div>
                        </div>
                        <!-- <div class="swiper-slide slider-img_slide">Slaid 3</div> -->
                    </div>
                </div>
</div>

Есть родительский блок с двумя дочерними, в одном слайдер с фото, в другом слайдер с текстом, как сделать так чтоб блок с текстом был прозрачным и я мог видеть и то и то?

Answer 1

Уточнение

Заголовок не совпадает с описанием и поэтому не совсем понятно что вы именно не можете, поэтому я отвечу на все понятные мне вопросы.

Ответ по заголовке

Вариант 1

Метод контроля дочерных элементов с помощью grid контейнера:

<div style="display: grid;">
  <div style="grid-area: 1 / 1;"> Child 1</div>
  <div style="grid-area: 1 / 1;"> 2nd child</div>
</div>

Вариант 2

Метод контроля дочерных элементов с помощью относительного позицирования:

<div style="position: relative">
  <div style="position: absolute; inset: 0;"> Child 1</div>
  <div style="position: absolute; inset: 0;"> 2nd child</div>
</div>

Ответ по описанию вопроса

По описанию вы не можете сделать фон элемента прозрачным, чтобы элемент сзади был виден:

div {
  background-color: red;
  font: 20px Consolas;
  font-weight: bold;
}

<div style="display: grid;">
  <div style="grid-area: 1 / 1;"> Child 1</div>
  <div style="grid-area: 1 / 1; background-color: transparent;"> 2nd child</div>
</div>

Answer 2

используйmix-blend-mode: multiply;на тексте

БЛОГ НА HUSL