float position z-index の考察 / 仮説


こんなふうになっているのではないか…仮説…

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の世界は3層ある

層が上のほうがかならず表示的に上に来る。position層だけはz-indexで表示順を操作できる。

  1. ノーマル層。position: static かつ float: none。 ぶつかり合って、同じ位置は占有できないので、弾かれる。親要素から唯一見える。(position: relativeは例外的にここに存在する。)
  2. float層。ぶつかり合って弾かれるが、1の層の上でおきているので、1の層とは干渉しないし、上に表示される。親要素からは消える。
  3. 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とは違う)

Leave a Reply

Your email address will not be published. Required fields are marked *