こんなふうになっているのではないか…仮説…
See the Pen used box float absolute2 by nakanishi (@nakanishi) on CodePen.
See the Pen used box float absolute3 by nakanishi (@nakanishi) on CodePen.
See the Pen used box float absolute4 by nakanishi (@nakanishi) on CodePen.
See the Pen used box float absolute5 by nakanishi (@nakanishi) on CodePen.
See the Pen used box float absolute6 by nakanishi (@nakanishi) on CodePen.
CSSの世界は３層ある
層が上のほうがかならず表示的に上に来る。position層だけはz-indexで表示順を操作できる。
- ノーマル層。position: static かつ float: none。 ぶつかり合って、同じ位置は占有できないので、弾かれる。親要素から唯一見える。(position: relativeは例外的にここに存在する。)
- float層。ぶつかり合って弾かれるが、1の層の上でおきているので、1の層とは干渉しないし、上に表示される。親要素からは消える。
- position層。平面的な世界で、ぶつかりあうことはなく、同じ位置に何個でも置ける。表示順はz-indexで指定する。top,left、z-indexが効く。親要素からは消える。(relativeだけは消えない。例外)
| position / float | none | left / right |
| static | 1層へ | 2層へ |
| relative | top,right等効く。1層へ | top,right等効く。2層へ |
| absolue, fixed | top,right等効く。3層へ | floatは効かない |
標準位置
- position: static
- float: none
- top、left等: auto (0とは違う)