スクロールしてもついてくる小枠の実装

レスポンシブデザインのサイトを多く見かけますが(最近は少々見飽きている)

よくスクロールしてもついてくる小枠があります。

これCSSだけで簡単に実装できてしまいます。

まずは、html。

<div class="css">
    サンプルです。
</div>

続いてCSS。

.css {
    top: 100px;
    position: fixed;
    z-index: 99;
    margin-left:-100px;
    width: 100px;
    padding:10px;
    background:red;
    border-radius: 5px 5px 5px 5px;
}

どうでしょうか。

簡単に実装できますね。


コメントを残す




Menu

HOME

 TOP