CSS3では、positionの属性値は、inherit、static、relative、absolute、fixedです。
Inheritは、親要素のposition属性値を継承するもので、IEではサポートされていません。
static デフォルト値。要素は (TRBL) および z-index 値を無視して通常のフローに表示されます。以下の例を参照してください。div1 の位置の値は静的であるため、top と left は影響しません。 If 継承の場合は、運用中に変更できます。
relative 相対位置。通常のドキュメント フローの通常の位置を基準にして配置されます。以下の例のように、div は通常の位置に対して 100px オフセットされます。ここで注意すべき点は、positino が相対に設定された後も、要素は配置される前の形状を保持し、要素が占有するスペースも保持されることです。つまり、配置前は、div はデフォルトでブロック レベルの要素 (div デフォルト属性) であり、配置後もブロック レベルの要素のままです。
<!Doctype html><meta charset="utf-8"><head><title>test position static</title> <style type="text/css"> .divPos{ position:static; left:100px; top:100px; } </style></head><body><div class="divPos">this id div 1(position is static)</div><div class="div2">this is div 2</div></body>
absolute static 以外の最初の親要素に対して相対的に配置される、絶対位置の要素を生成します。以下の例に示すように、
<!Doctype html><meta charset="utf-8"><head><title>test position static</title> <style type="text/css"> body{ background-color:#ffff33; } .divPos{ position:relative; left:100px; top:100px; background-color:#000fff; } </style></head><body><div class="divPos"> The position of this div is relative...</div></body>fixed は、ブラウザ ウィンドウを基準にして配置される絶対位置要素を生成します。以下の例のように、右側のスクロール バーはスクロールでき、div はウィンドウに対して常に同じ位置にあります。実際、より適切な例は、ショッピング カートを作成することです。
れーい
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
