position: relative;

Question

サイト作成で画像がフェードインするスライドを作っているのですがposition: relative;を使うと、スライドの下にあるコンテンツがスライドの下に潜り込んでしまいます。下のコンテンツ画像の下に潜り込まないようにするのにはどうしたらよいのでしょうか。

<div class="slide">
   <img src="" alt="photo">
   <img src="" alt="photo">
   <img src="" alt="photo">
</div>

.slide {
    position: relative;
}
.slide img {
    position: absolute;
top: 0;
left: 0;
}

Answer 1

position: relative; というより、img に position: absolute; を設定することによってフローから外れて、.slide の高さが0になるのが原因です。
.slideに適切な高さ(画像の高さ)を設定してあげればいいでしょう。

例えば、

.slide {
    position: relative;
}
.slide img {
    position: absolute;
    top: 0;
    left: 0;
    height: 500px;
}

.slide {
    height: 500px;
}

Comments

[yoshishin]

ありがとうございます