Добавить рамку: 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;
другие слайды слайдера будут отображаться, как это.