画面内に要素(ヘッダーとかボタンとか)を固定して表示させたいときがあるかと思います。
そこで様々な場面で使いまわしでき、改造も簡単にできる方法を紹介します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>浮いてる要素</title>
<style>
.Content{
height:50vh;
background: #40e0d0;
margin: 5px;
}
.top_left_hover {
position: fixed;
left: 20px;
top: 20px;
background: #FFFFFF;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<p class="top_left_hover"><input type="text" placeholder="検索したい文字"><input type="button" value="検索"></p>
<div class="Content">コンテンツ1</div>
<div class="Content">コンテンツ2</div>
<div class="Content">コンテンツ3</div>
</body>
</html>上記コードを保存し、ブラウザで表示してみてください。
スクロールしても画面内に検索ボックスがついてきますね。
サンプルコード解説
top_left_hoverを固定表示させたい要素のclassに指定します。
（<p class=”top_left_hover”>のようにします。）
CSSでは、position: fixed;にて固定表示、left: 20px;とtop: 20px;で位置を決めています。
ついでに、box-shadowで影をつけて浮いてるように見せています。
ヘッダのように使う場合は、widthを横幅いっぱいにしてあげてください。
フッタも同様かと思います。
（その場合は、影はいりませんので、 “box-shadow～”行は削除してください。 ）
“top_left_hover” を丸々コピーし、” top_right_hover “に名前を変えて、 “right: 20px;”と”top: 20px;” とかにしても使えますね。
