スライダーの下に続くべき要素がかぶってしまう

Question

スライダーの下に続くべき要素がかぶってしまいます。

こちらのスライダーを
使いたいのですが、
このスライドの下に続く要素がスライダーの下（裏）に隠れてしまい、表示できません。
どうしたらスライダーの下に続かせられますか？

下記コードは上記リンクを少しいじっています。
cssの@keyframes は割愛しています。

positionかなと思うのですが、
.slideshowにabsoluteがかかっていて混乱してきました。
.box1にmargin-topもおかしな気がします。

初歩で申し訳ありませんが、宜しくお願い致します。

	<h1><small>Fullscreen</small> Ken Burns effect <small>without javascript</small></h1>

	<div class="slideshow">
		<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div>
		<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div>
		<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div>
		<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div>
	</div>

	<div class="box1">
		<p>テストテストテストテストテストテストテストテスト</p>
	</div>

.slideshow {
  position: absolute;
  width: 100vw;
  height: 400px;
  overflow: hidden;
}
.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  animation-name: kenburns;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  opacity: 1;
  transform: scale(1.2);
}
h1 small {
  display: block;
  text-transform: lowercase;
  font-size: .7em;
}
h1 small:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: .5em;
}
h1 small:last-child {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding-top: .5em;
}
.box1 {
	background: #08315C;
	color: #fff;
	height: 300px;
	text-align: center;
}

Answer 1

.slideshow {position: absolute;}を.slideshow {position: relative;}でいけないでしょうか？

Comments

[mocco]

有難うございます！単純にrelativeで良かったのですね…元々のcssのpositionをいじるのは怖くていじりませんでした…

Answer 2

.slideshow {
  /*position: absolute;*/
  position: relative; /* ADD */
  width: 100vw;
  height: 400px;
  overflow: hidden;
}
```**動くサンプル：**[https://jsfiddle.net/98m5704s/](https://jsfiddle.net/98m5704s/)

Comments

[mocco]

ありがとうございます！まさかこんな簡単な事だったとは…恥ずかしながらポジションをいまいち理解できておらず…再度勉強したいと思います。有難うございました！