position CSS プロパティとは
トピック：要素の位置・配置方法を指定する、事ができる 要素に使用される位置決めメソッドのタイプ(static, relative, absolute, fixed, sticky)を指定する
プロパティ position
実例 コード 1
サンプル コードを試すh1 { position: absolute; top: 100px; left: 150px;}
プロパティ 定義と使用法
| デフォルト値・初期値 : | static |
|---|
| 適用対象 : | 全要素 |
|---|
| 継承 : | なし |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS2 ～ |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.position="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| stacking context 作成 : | あり |
|---|
| CSSの構文 | position: static | absolute | fixed | relative | sticky | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
static | 要素のボックスは、通常のフローに従ってレイアウトされた通常のボックスです。top,right,bottom,left,およびz-indexプロパティは静的箱では無視される これはデフォルト値です。 |
relative | 要素は、通常の位置（これは通常の流れの位置と呼ばれます）に対して配置される |
absolute | 要素は、静的以外の位置値を持つ最初の祖先要素を基準にして配置される |
fixed | 要素は画面のビューポートに対して固定されており、スクロールすると移動しません。印刷すると、要素はすべてのページに印刷される |
sticky | 要素は、ユーザーのスクロール位置に基づいて配置される スティッキー要素は、相対位置と固定位置の間で、スクロール位置に応じてトグルする 指定されたオフセット位置がビューポートで満たされるまで相対的な位置にあります - 位置に固定されたまま固定される 注：IE / Edge 15以前ではサポートされていません。-webkit-接頭辞付きのバージョン6.1からSafariでサポートされています。 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| position | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯4 | フルサポート◯1 |
|---|
fixed | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯7 | フルサポート◯4 | フルサポート◯1 |
|---|
sticky | フルサポート◯56 | フルサポート◯16 | フルサポート◯32 | サポートなし✖ | フルサポート◯43 | フルサポート◯6.1 |
|---|
Table elements as absolute positioning containers | 不明 | 不明 | フルサポート◯30 | 不明 | 不明 | 不明 |
|---|
Table elements as sticky positioning containers | サポートなし✖ | 不明 | フルサポート◯59 | 不明 | サポートなし✖ | 不明 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| position | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
|---|
fixed | フルサポート◯あり | フルサポート◯あり | 不明 | 不明 | フルサポート◯あり | 不明 | フルサポート◯あり |
|---|
sticky | フルサポート◯56 | フルサポート◯56 | フルサポート◯16 | 不明 | フルサポート◯43 | 不明 | フルサポート◯6.0 |
|---|
Table elements as absolute positioning containers | 不明 | 不明 | 不明 | フルサポート◯30 | 不明 | 不明 | 不明 |
|---|
Table elements as sticky positioning containers | サポートなし✖ | サポートなし✖ | 不明 | フルサポート◯59 | サポートなし✖ | 不明 | サポートなし✖ |
|---|
CSS position | CSS プロパティ 値| 意味 使い方 実例 – WebRef