cssメモ

##input内の左端にスペースを作る
paddingを使う場合と違って、表示崩れしないという多大なメリット。
文字位置調整の他、虫眼鏡マークも入れられます。
フォームいっぱいに入力した場合、インデントしなくなるので普通にpaddingで・・・

  /* text-indent: 2em;*/
  padding: 0.4em 0.8em 0.4em 2em;

##Opacity
重なるものすべてを透明にしてしまうopacity。
z-index使っても意図した挙動にならない場合あり。

index.html

<div class="a0">
    <div class="a0_child">子要素<br/>
                          absolute<br/>
                          z-index:9999<br/>★両方意味なし
     </div>
</div>
<div class="a1">a1<br>static<br/>z-index:9999<br/>★z-index意味なし</div>
<div class="a2">a2<br>relative<br/>★OK</div>

css

style.css

.a0 {
  opacity: 0.6;
  /* position:relative; *//* ポイント */
  /* z-index: -9999; *//* ポイント */
}

.a0_child {
  position: absolute;
  z-index: 9999;
}

.a1 {
  z-index: 9999;
}

.a2 {
  position: relative; /* ポイント */
}

opacityしている要素を次のようにする。

1. position:relative付与。デフォのstatic以外ならなんでもいい。
2. z-indexの値を下げる

style.css

.a0_child{
  opacity:0.6;
  position:relative; /* これと */
  z-index:-9999; /* これ*/
}

または、透明にしたくない要素をrelativeにする。デフォ以外ならなんでもいい。

style.css

.a1{
  position:relative /* absolute,fixedでもいい */
}

opacityがある子要素の場合には効果なし。

##固定と可変floatでのカラム落ち対策
###原因

固定(px)　 可変(%)

可変が100%でなくとも、ウィンドウサイズを縮めていくと固定領域は縮小しないので、固定の全体に占める割合が次第に増えていき、可変領域がカラム落ちします。

###対策

1. 可変のfloatとwidth(%)を親に移動
2. 親で固定幅分をネガティブマージン
3. 可変要素自身でネガティブマージン幅を打ち消して位置調整

#right{
  /* 親に移動
     float:left;
     width:100%;  */
   margin-left:80px;/*ネガティブマージンで左によった分を打ち消し*/
}
#rightContainer{
  float:left;
  width:100%;
  margin-left:-80px; /*ネガティブマージン*/
}

###面倒なところ
幅調整する要素には、親が必要。

###float使わない代替手段
flexbox使う。display:flex。多分最近の主流。