position

Positionプロパティは、要素を配置する方法を指定します.
positionプロパティとして指定し、top、bottom、left、rightで正しい位置を決定します.
positionのデフォルト値はstaticで、デフォルト値はドキュメントの流れに基づいて配置されます.
希望する位置に置きたい場合は、Propertyを使用します.
positionのpropertyは3種類あります.
相対

:基準点

absolute:親要素内に

を配置する

固定:

固定

sticky:最も近い親要素に固定

簡単に説明すれば、このように理解できます.
もっと詳しい説明は以下で見てみましょう.

📎 postion:relative

ドキュメントのプロセスに従って配置され、他の要素に影響を与えません.relativeは、上、左、右、下の値に座席を指定することもできます.
コードで書きましょう.

<div class="content-test">
     <div class="box"></div>
     <div class="box second"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>

.content-test {
    margin:100px auto;
    width: 900px;
    height: 300px;
    border: 5px solid #000;
}
.box {
    width:25%;
    border:2px solid #000;
    height:290px;
    background-color:#fff;
    float:left;
}
.second {
    position:relative;
    top:20px;
    right:20px;
}

コードで集中的に表示する必要がある場所は.secondです.relativeの値を与えて位置を移動すると、標準位置から
位置値をあげると移動します

📎 position:absolute

ドキュメントの流れに基づいて配置し、相対値を与える親要素に基づいて配置します.
positionはtop、left、right、bottom値に位置を指定することもできます.
コードで書きましょう.

<div class="content-test">
     <div class="box"></div>
</div>

.content-test {
    margin:100px auto;
    width: 900px;
    height: 300px;
    border: 5px solid #000;
    position:relative;
}
.box {
    width:100px;
    height:100px;
    border:2px solid #000;
    background-color:#fff;
    position:absolute;
    top:100px;
    left:400px;
}

コードで重点的に見るべき点は.位置:絶対と
.conntent-testのposition:相対.
position:absoluteは、与えられた相対値の親要素に対して配置されます.
使用する場合は、移動するエレメントの親エレメントに相対値を付与し、位置値を決定します.

📎 position:fixed

ドキュメントフローに従うのではなく、bodyの周囲を展開して配置します.position:fixedは、ほとんどの上端メニューバーや、ある場所に固定する必要があるサイトでよく使用される属性です.
position:fixedで同時に使用する場合、良い属性はz-indexです.
簡単に言えば、z−indexは、スタック順序を決定する属性と見なすことができる.

なぜz-indexと書くのですか?🧐

たとえば、上部のメニューバーposition:fixedを使用します.
そのメニューバーはスクロールしてもその位置に固定されている.
しかし、下には必ず内容があり、メニューバーが内容に遮られて見えない場合があります.
この場合、z-index : 1と書けば内容は隠されない.
すべてのコンテンツの先頭に表示されます.

実際の操作でz-indexを使用する場合👍

z-indexが私の考え通りに1.22102000と書けば、
これもコードの作成方法で、私だけが前に何が現れたかを見ることができます.
z-indexの順序を変更する場合は、他のz-indexを変更する必要がある場合もあります.
会社は主に協力して、私が書いたコードも修正します.
実務ではほとんどの分野でz-indexの区間が設定されています.
例えば、ヘッダーは1-9/10-19/フッター20-39
もちろん、一番上の内容は最大のz-index値を与えるべきです.
(YouTube動画で知った事実🤭)
コードで書きましょう.

<header>
	<nav class="gnb">
		<ul>
        	<li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="https://hello-dodohee.github.io/game.html/">PORTFOLIO</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
   </nav>
</header>

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    z-index:1;
    background-color:rgba(255,255,255,0.3);
    box-shadow: 0 0 30px -20px;
}

コードで集中的に表示する必要がある場所はheaderです.
メニューバーを一番上にスクロールしても、一番上に固定して一番前に表示したいです.position:fixedおよびtop:0およびz-indexの値が与えられる.

📎 position:sticky

ドキュメントのプロセスに従って配置し、最近の親要素に基づいて配置します.
実はstickyはあまり使わないので、今回習ったときはよく知らなかったです.
stickyはほとんどメニューバーが長くなったりスクロールしたりしたときに
カテゴリ(親要素)が固定されると他のカテゴリが表示され、他のカテゴリは固定されます.

block inline

block要素は常に新しい行から始まり、総幅を占めます.
Inline要素は新しい行から開始せず、必要な幅だけを占有します.
blockとinlineの違いが分かれば、
cssを使用して、必要に応じて要素をブロックまたはインライン化できます.
displayプロパティの3種類は、propertyを使ってコードを記述すればよい.

display:none

display:block

display:inline

display:inline-block

📎 display:none

display:noneは、非表示要素を処理するために使用されます.

📎 display:block

display:blockはspan、aは
Blockのように見えるProperty
block要素の横(左右)に他の要素を貼り付けることはできません.

📎 display:inline

display:inline htmlのblock要素を
インラインのpropertyのように見えます.
inline要素は要素の間の1行に位置することができ、隣接しています.

📎 display:inline-block

block要素をinline要素に変換し、inline要素をblockのpropertyに変換します.display: inlineとの違いは、幅と高さを設定できることです.display: blockとは異なり、display: inline-block要素の後に改行文字を追加しない場合、要素は他の要素の横に配置することができる.

float

プロパティは、画像の周囲にテキストを配置できるように作成されます.
レイアウトに使用する一般的なプロパティ.
floatのプロパティは3つ覚えられます.

左:左置き

右:右置き

継承:親要素別に

配置

floatを使用しない場合は、3つの箱が縦に並んでいます.
これはblockプロパティのためです.
ただし、各ボックスにfloat:leftを記入すると、横に並べて並べられていると判断できます.
コードで書きましょう.

.box1{
width:300px;
height:150px;
background-color:pink;
float:left;
}
.box2{
width:300px;
height:150px;
background-color:yellow;
float:left;
}
.box3{
width:300px;
height:150px;
background-color:blue;
float:left;
}

📎 clear

フローティングを初期化します.floatプロパティのアプリケーションバージョンと考えられます.

clear:左側初期化

clear:右初期化

clear:両方とも

初期化

写真のコードでは、各箱がfloa:leftで、羅列を続ければ
親の要素の大きさを超えると、箱は下がります.
そこで3番目の箱から降りたいなら、clearと書いてもいいです.

.testbox{
    width:700px;
    height:700px;
    margin:auto;
    border:5px solid #000;
}

.testbox > div {
    background-color:goldenrod;
    width:200px;
    height: 200px;
    float:left;
}

.testbox > div:nth-child(3){
    clear:left;
}

コードで重要な点は3番目のボックスでclear:左をください
float:leftプロパティをキャンセルしたと考えられます.