CSS＆Bootstrap コンテンツが重なってしまう

Question

Bootstrapに独自のCSSを織り交ぜてデザインしております。
CSS初心者で色々と検索しながらやっておりますが、行き詰まってしまいました…アドバイスいただけますと幸いです。

やりたいこと

猫ちゃん画像部分（猫はCSSで背景として画像を設定）を、このように
2カラム（青枠）部分と、その下に1カラム（赤枠）にしたいです。
赤枠部分には、Home、ログイン、会員登録　のようなリンクを設置したいと思ってます。

↓しかし、実際は、

このように、1カラムの赤枠（リンク）部分が2カラム部分にかぶってしまいます……

コード

html部分

    <!-- footer -->
    <div class="footer-contentsarea overlay1">
        <div class="bg"></div>
            <div class="footer-text">
                <div class="row">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
            </div>
            <div class="footer-link">
                <ul>
                    <li>Home</li>
                    <li>ログイン</li>
                    <li>会員登録</li>
                </ul>
            </div>
    </div>
    <footer class="text-center border-top pt-3 pb-3 small">
  	© All rights reserved by cats-clover.
    </footer>

CSS

/*一番下の、All right~部分*/
footer {
    background-color: #d4e5ce;
    height: 50px;
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 0;
}

/*猫ちゃん画像部分*/
.footer-contentsarea {
  width: 100%;
  height: 300px;
  background: #fff;
  
  position: relative; /*相対位置*/
  
}

/*2カラム部分　footer-textが2カラム部分*/
.footer-contentsarea .footer-text{
    width: 100%; /*absoluteで位置を設定するときに、幅と高さは必ず必要*/
    /*height: 1.5em;*/
    height: 215px;
    color: #000;
    font-weight: bold;
    text-align: center;

    /*位置の設定 - 上下中央寄せ*/
    position: absolute;
    margin: 0; /*元はauto*/
    top: 0;
    bottom: 0;
}

/*1カラム部分*/
.footer-link {
    width: 100%;
    height: 80px;
    text-align: center;

}

.footer-link ul li {
    list-style: none;
    display: inline;
    margin-right: 2em;
}

/*猫ちゃん部分の画像*/
.bg{
    /*位置の設定*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    /*背景画像の設定*/
    background: URL(https://catsclover.s3.amazonaws.com/myprefix/cat_footer2.JPG);
    background-size: cover; /*描画領域全体を覆い尽くすまで拡大・縮小させる*/
    background-repeat: no-repeat;
    background-position: center;

    /*透過の設定*/
    opacity: 0.5;
}

背景画像は、こちらを参考にしました。
https://techacademy.jp/magazine/19412

positionを使っているからかなぁと思っておりますが、つけたり外したりしていますがうまくいきません。
Bootstrap関係ないかもしれませんが、2カラム部分をBootstrap使っているので記載しました。
何卒、よろしくお願いいたします。。

Answer 1

footer-textにあるposition:absoluteを外せば重なりは解消されるはずです。footer-linkをfooter-contentsareaの最下部に配置したいのであれば、position:absolute; bottom: 0;を適用させれば良いでしょう。ただ、footer-textを絶対配置にする必要があるのかは少し疑問ですが。

.footer-link {
    width: 100%;
    height: 80px;
    text-align: center;
    /* 追加 */
    position: absolute;
    bottom: 0;
}

Comments

[mikeko0901]

ありがとうございます！footer-textにあるposition:absoluteを削除したら下に来ました！