Mostrar elemento fuera del div anidado mientras la visibilidad permanece oculta

Question

Jul 31, 2017, 06:18 PM

html css overflow css-position positioning

Mostrar elemento fuera del div anidado mientras la visibilidad permanece oculta

Quiero lograr esto Esté atento al texto superior'Happy Fruit'. Quiero que se superponga la caja mientras está anidada dentro de ella.

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>

Si luego voy y agrego unmargin-top: -50px; a la h1 el texto permanecerádentro del div, pero ¿cómo puedo hacerlo subir / pararse sobre él? en él mientras todavía está anidado dentro (html)? He intentado jugar conz-index Pero eso no funcionó.

position: relative; top: -50px;

El .slides tieneoverflow: hidden; porque si está encendidooverflow:visible; aparecerán las otras diapositivas del control deslizante, de esta manera.