07.05レイアウト2(z-index/float/overflow/flex/中央揃え)

実習コードハブリンク

レイアウト

z-index

positionプロパティを使用すると、要素を重ねて配置できます。このとき、要素の垂直位置をz-indexプロパティに設定します。(z-index:z軸の影響プロパティ)の値は整数で、数値が大きいほど上に、数値が小さいほど下になります。

三次元属性の位置>積層現象、男性

z軸:3 D属性の位置のみ使用可能(相関、絶対、固定)

最初の兄弟位置属性値が2 Dか3 Dかは、レイヤオーバーラップに依存します.
(2 D:オーバーラップなし/3 D:オーバーラップ)

の大きなスペースを作成するときに2 Dを使用します.(重複防止)

float

🍒 css floatプロパティ

プロパティは、フローティングHTML要素が周囲の他の要素と自然に一致するように設定されていることを示します.clearfloatプロパティを適用した後に表示される要素がfloatプロパティの影響を受けないように設定します.オーバーフローされたコンテンツ(コンテンツ)のサイズが、その要素を囲むコンテナ要素より大きい場合にどのように処理するかを設定します.overflow-xは、コンテンツ(コンテンツ)のサイズが要素の水平方向ボックス(ボックス)を超えた場合にどのように処理するかを設定します.overflow-yコンテンツ(コンテンツ)のサイズが要素の垂直方向ボックス(ボックス)を超えた場合の処理を設定します.

float

直線アトリビュートを使用せずにx軸で位置合わせするには
float:左/右>箱を同じ線上に置く

float使用時の注意点

画面サムネイルの場合、レイアウトが歪んでしまいます.

floatを

body(ブラウザ)に直接適用すると、bodyの値は変化し続けるため、ria隣接者が歪む.

フローティングラベルを固定価格で包む必要があります.(floatがpx値の場合)

<div class="float_wrap">
    <div class="float_left"></div>
    <div class="float_right"></div>
</div>

.float_wrap { width : 1000px;
              height : 300px;
             } 
.float_left { float : left;
              width : 200px;
              height : 300px;
              background-color : red;
             }
.float_right { float : right;
               width : 200px;
               height : 300px;
               background-color : yellow;
             }

%(可変値)を入れると、かばう必要はありません.

floatの場合、3 Dであるため、子がfloatの場合、親に高さ値がない場合>は影響しません.(親に高さ値がない場合は領域は表示されません)

フローティングは、位置のみに適用されます.静的/相対的プロパティ(固定/絶対)
=floatは三次元特性を有するので,三次元位置fixed/absoluteと相殺されると理解される.

clear

clearプロパティはfloatプロパティを適用した後に現れる要素の動作を制御します。floatプロパティをコンテナ要素に適用すると、その後に現れるすべての要素が正しい位置を設定するのは難しいです。したがって、floatプロパティを適用しようとするすべての要素が表示されたら、clearプロパティを使用して、後に表示される要素をflaotプロパティの影響を受けないように設定します。

<div class="clearfix"></div>
.clearfix { clear : both; }

clear : both; > floatの機能をオフにする場合(floatの次のタグ領域にclear値を入力)
floatの機能がオフになり、以下の領域を作成できます.
タグのclass名は通常clearfixとして指定されます.

    <section>
        <div class="left-2"></div>
        <div class="right-2"></div>
    </section>
    <div class="clearfix"></div>
    <footer></footer>

floatコンセプトクリーンアップリファレンスサイト

overflow

floatプロパティを適用するHTML要素がコンテナ要素より大きい場合、要素の一部がオーバーフローします。オーバーフローしないようにoverflowを設定できます。

非表示

領域以外のコンテンツ

overflow : hidden;

領域では、スクロールしてコンテンツを表示できます.

overflow-y : scroll; 
overflow-x : scroll;

コンテナ要素のサイズを、内部要素を自動的に非表示にできるサイズに設定します.

overflow : auto;

floatを使用する場合、親に高さ値がない場合、親は表示されません.
overflow : hidden; 入力すると、子と同じ高さが生成されます(親に子の高さを認識させます).

overflow : hidden; 適用結果