Добавить рамку: 1px, прозрачный; к классу слайдера и присвойте margin-top отрицательное значение тегу h1, например -40px, как в приведенном ниже кодовом решении.

у добиться этого. Следите за верхним текстом«Счастливые фрукты», Я хочу, чтобы меняли наложение на поле, пока оно внутри него.

body {
  background: yellow;
  padding: 50px;
}
.slider {
    width: 100%;
    height: 650px;
    margin-top: 40px;
    background: orange;
    box-shadow: 0 0 78px 11px #F3286B;
}
h1, h2 {
  text-transform:uppercase;
  color: red;
}
h1 {
  font-size: 11vw;
}
h2 {
  font-size: 7vw;
}
<body>
<div class="slider">
<h1>
Happy Fruit
</h1>
<h2>
HELLO WORLD
</h2>
</div>
</body>

Если я тогда пойду и добавлюmargin-top: -50px; до h1 текст останетсявнутри div, но как я могу сделать это выше / стоя на нем на нем, пока он все еще находится внутри (html)? Я пытался играть сz-index но это не сработало.

position: relative; top: -50px;

.Slides имеетoverflow: hidden; потому что если он включенoverflow:visible; другие слайды слайдера будут отображаться, как это.

Ответы на вопрос(0)

Ваш ответ на вопрос