【CSS】position: fixed; で要素を固定配置！でも、ちょっと違う…
2024-04-02
CSSのposition属性における「Fixed position but relative to container」について
position: fixed; は、要素をブラウザウィンドウに対して固定位置に配置します。しかし、場合によっては、要素を親要素に対して固定位置に配置したいこともあります。この場合、position: fixed; と position: relative; を組み合わせることで実現できます。
仕組み
position: fixed; を使用すると、要素はブラウザウィンドウのスクロールに追従せず、常に同じ位置に表示されます。一方、position: relative; を使用すると、要素は元の位置から相対的に移動されます。
例
以下のコードは、#container 内の要素を #container の左上に固定位置に配置します。
#container {
position: relative;
}
#element {
position: fixed;
top: 0;
left: 0;
}
注意点
position: fixed;を使用すると、要素は文档流から外れます。つまり、他の要素と重なり合う可能性があります。position: fixed;は、IE7 以前のブラウザではサポートされていません。
代替方法
position: fixed; 以外にも、要素を親要素に対して固定位置に配置する方法があります。
position: absolute;とposition: relative;を組み合わせるposition: sticky;を使用する
補足
- 上記の例では、
#elementの幅と高さを設定する必要があります。 #elementの位置を調整するには、top、left、bottom、rightプロパティを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed position but relative to container</title>
<style>
#container {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
#element {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
</body>
</html>
解説
#containerは、幅と高さ 400px の四角形として表示されます。#elementは、#containerの左上に固定位置に配置されます。
実行結果
ブラウザでこのコードを開くと、以下のように表示されます。
#elementの幅と高さを変更することもできます。#containerのスタイルを変更することもできます。
親要素に対して要素を固定位置に配置する他の方法
position: absolute; と position: relative; を組み合わせる
position: absolute; は、要素を親要素に対して相対的に配置します。position: relative; と組み合わせることで、親要素を基準とした固定位置に要素を配置できます。
<div id="container">
<div id="element"></div>
</div>
#container {
position: relative;
}
#element {
position: absolute;
top: 0;
left: 0;
}
position: sticky; は、要素をスクロールするまで親要素に対して相対的に配置し、スクロール後はブラウザウィンドウに対して固定位置に配置します。
<div id="container">
<div id="element"></div>
</div>
#container {
height: 400px;
overflow: scroll;
}
#element {
position: sticky;
top: 0;
left: 0;
}
CSS Grid レイアウトは、要素をグリッド状に配置するレイアウト方式です。この方式を使用すると、要素を簡単に親要素に対して固定位置に配置できます。
<div id="container">
<div id="element"></div>
</div>
#container {
display: grid;
}
#element {
grid-area: 1 / 1;
}
<div id="container">
<div id="element"></div>
</div>
#container {
display: flex;
}
#element {
align-self: flex-start;
}
- 要素をスクロールするまで親要素に対して相対的に配置し、スクロール後はブラウザウィンドウに対して固定位置に配置したい場合は、
position: sticky;を使用する方が良いでしょう。 - 要素をグリッド状に配置したい場合は、CSS Grid レイアウトを使用するのがおすすめです。
親要素に対して要素を固定位置に配置するには、いくつかの方法があります。どの方法を使用するかは、要件によって異なります。
css position css-position
