css:表示について

１　表示形式の変更、表示・非表示の切り替えの指定

• display: block; ·・・・・ブロック要素に変更
• display: inline;・・・・・インライン要素に変更
• display: inline-block;・・インラインブロック要素に変更
• display: none ;・・・・・・要素を非表示に変更
※非表示の設定・状態の要素以外は、ブロック要素やインライン要素の状態として「表示させる」という捉え方もできます。

・要素の非表示（display: none;）の用途
レスポンシブサイトなどではPCサイトとスマホサイドでパーツが差し代わることがあります。
例：あらかじめhtml に用意したハンバーガーメ二ューをPCサイトでは「非表示」（display: none;にする）、スマホサイトの時は「表示」（display: block;などにする）

・display: block; かdisplay: inline-block;かどっちでインライン要素を変更するべきか
→横並びのまま要素に指示を出したい時はdisplay: inline-block;
display: block;だと縦並びになってしまう。

２　はみ出しに関する指定

overflow: visible ;・・はみ出たままの状態で表示する※初期値（あまり使わない）
overflow: hidden ;・・はみ出た部分を隠す
overflow: scroll ;・・・はみ出た部分を隠してスクロールできる状態にする
overflow: auto ;・・・ブラウザにより表示が異なる（基本的にはスクロールできる状態に）（あまり使わない）

３　要素の重なり、全面と背面の指定

z-index: 数字；
基本的には後に登場する要素が前面に並ぶようになっていますが
z-indexに大きな値を入力している要素が前面になります。
※注意：親要素を子要素の前面に配置する場合は、
子要素の設定値をマイナスの値で設定。親要素のz-indexで大きい値を入れても前面にでない。同じ階層間でしか効かない。しかし、子要素にマイナス値を与えると背面へ行く動きになる

.boxmain {
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
z-index: 300;　・・・手前に来れない。同じ階層でないと効かない→子要素のz-index: ;の値を両方マイナスにすると親要素が前面に来る 
}

.boxA{
width: 100px;
height: 100px;
background-color: rgba(0, 0, 255, 0.8);
position: absolute;
right: -30%;
top: 50px;
z-index: 100;・・・本来boxBがboxAより前面だがこの指示により、逆になる。
}

.boxB{
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.8);
position: absolute;
right: -20%;
top: 60%;
}