最終更新:2020-04-22 (水) 13:13:09 (1458d)
position
Top / position
値
position:static?
- 特に配置方法を指定しない (デフォルト)
- この値のときには、top、bottom、left、rightは適用されない
position:relative
- 相対位置
position:absolute
- 絶対位置
- 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置
- 親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置
position:fixed
- 絶対位置だけどスクロールされても同じ位置
メモ
iPhone/iPadでは、CSSのposition:fixed;がサポートされていません。
CSS fixed positioning works in Safari on iPhone and iPad, but not as you might expect. While elements that use fixed positioning in Safari on Mac OS X and Windows always stay on screen, elements that use fixed positioning in Safari on iPhone and iPad can end up offscreen as users zoom and pan the webpage. Why does this happen?
By definition, the containing block of a webpage element that uses CSS fixed positioning is the viewport. This means that when you set position: fixed with a bottom and right value of 20px as shown in Listing 1-4, you have "fixed" the position of an element 20 pixels above the bottom edge of the viewport, and 20 pixels from the right edge of the viewport.
