13:45positionプロパティは、要素の配置方法を指定します。leftプロパティと合わせて指定する事で配置される位置を指定する事が可能です。floatプロパティと同様にレイアウト関係で使ったりしますが、大枠などのレイアウトより、特定のボタンを配置するのに使ったりと、ちっこい部分で使う事が多いです。このpositionプロパティを駆使する事で色んな配置ができますが、要素を重ねまくって情報が損なわれてしまったり、文書構造を完全に無視した配置などは避けましょう。継承しませんパーセント値N/Aメディアvisual値の解説staticボックスは通常フローにて配置されます(指定が無いのと同じ)。leftプロパティは適用されません。relativeボックスは通常の位置から相対配置されます。leftプロパティで指定します。後続するボックスは、相対配置されたボックスが通常配置された位置に有るものとして配置されます。absoluteボックスは絶対配置されます。絶対配置の基点は、包含ブロックからの距離になります。包含ブロックからの距離と言うと分かり難いかもしれませんが、親要素に位置指定されている要素(positionプロパティの値がstatic以外の要素)がある場合はその要素が包含ブロックを設置するため、その要素の左上が基点になり、位置指定されている要素が無い場合、包含ブロックはルート要素になるので、ウィンドウの左上が基点になります。leftプロパティで指定します。この絶対配置されたボックスは通常フローから外されるため、兄弟要素の配置には影響せず、他のどの要素のマージンとも相殺されません。要素はブロックレベル要素になり、floatプロパティの指定が有った場合の値は、強制的にnoneにされます。fixedボックスはabsoluteと同様に配置されますが、位置が固定されるためスクロール等をしても移動しません。同様に配置と言っても、固定配置の場合、包含ブロックは閲覧領域に対して設定されるため常にウィンドウの左上を基点とします。この値はIE6では対応していません。各要素がpositionプロパティによって重なった場合に、ボックスが前面なのか背面なのかはスタックレベルによって決定され、このスタックレベルはz-indexプロパティによって変更する事ができます。このサンプルを今見ているブラウザで表示すると以下のようになります。150;}固定配置のサンプルです。右下に固定表示されているのが実際のサンプルになります。IE6はfixedに対応していないため、このすぐ下に表示されてしまいます。#fd762b;}ちょっと実用的なサンプルって事で、見出しの横に有るボタンをpositionプロパティでやった場合のサンプルです。relative;の指定をする事で基点を作り、.moreの位置を指定しています。1;の指定はIE6対策で、指定が無いとIE6だけ表示位置がずれてしまいます。これは、hasLayoutが関連しているので、.sectionHeaderにwidthプロパティを明示したりする事でも対処可能です。このサンプルを今見ているブラウザで表示すると以下のようになります。サンプルのブラウザ上の表示いつかのメリークリスマス2022年12月25日もっと見るfloatプロパティとpositionプロパティを覚えて自由に使いこなす事が出来れば、大半のレイアウト、デザインが組めるようになると思います。