positionのfixedは、ウィンドウの表示領域を基準として要素を配置します。
目次 | positionのfixed |
要素の位置を固定して配置する(fixed) |
positionのfixed
書き方 | position : 値 |
fixed ウィンドウの表示領域を基準とした配置になります。 位置が固定され、スクロールしても動きません。 fixedは固定したという意味です。 |
|
positionプロパティの値として、他にstatic,relative,absolute,stickyがあります。 | |
備考 | 左上にある水色の四角はfixedを指定しています。 表示領域のtopとleftを指定しているので位置が固定されスクロールしても動きません。 |
初期値 | static |
継承 | なし |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/position |
要素の位置を固定して配置する(fixed)
要素の位置を固定して配置するサンプルです。
<style>
.box1 {
position: fixed;
top: 20px;
left: 20px;
width: 100px;
height: 50px;
background-color: #e0ffff;
color: #000;
border: 1px solid #000;
}
</style>
<body>
<div class="box1">box1</div>
</body>
3行目は、position:fixedです。
4行目は、topでウィンドウの上の位置から下に20pxずれます。
5行目は、leftでウィンドウの左の位置から右に20pxずれます。
ウィンドウ表示領域の左上を基準にします。
画面イメージは次のようになります。
topとleftの代わりにbottomとrightの指定もできます。
マイナスの数値の指定もできます。
fixedの
テスト
テスト
関連の記事