フローティングバナーをCSS作る【Web制作】

2021 2/08

2020/04/08 2021/02/08

スポンサードリンク

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。
ポイントとしては

・position: fixed,bottom:0;の指定
・z-indexの指定

の設定です。

position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。
z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。
z-indexは大きい値が上に表示されます。

html


<div class="floatingWrap">
    <div class="floating">
        <a href="https://webhoric.com/hp/">フローティングバナー</a>
    </div>
</div>

CSS


/****** フローティングバナー **********/
.floatingWrap{
    width: 100%;
    position: fixed;
    bottom:0;
    z-index: 100;
        
}
.floating{
   -webkit-backface-visibility: hidden;
    -webkit-transition: All 0.3s ease;
    backface-visibility: hidden;
    background-color: #c9b46f;
    color: #fff;
    cursor: pointer;
    display: block;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    text-align: center;
    transition: All 0.3s ease;
    width: 100%;
}
.floatingWrap .floating a{
    color: white;   
    font-size: 18px;
}
.floating a:hover{
    color: #5c594c;

}

See the Pen
css フローティングバナー by miccyome (@miccyome)
on CodePen.