position:absolute;とbottom:0;でオブジェクトが消える…～CSS覚書き～

position:absolute;とbottom:0;でオブジェクトをどうしても固定配置したかったのに、ハマってなかなか上手くいかなかったので、その原因を覚書き。

親要素のCSSにoverflow: hidden;を追加する

position:absolute;で上手く配置出来ない場合、親要素が上手く指定されていないことが大半の原因ということで、親要素の親要素のpositionをstaticに指定してみたり、新たに親要素を作ってみたり、色々試行錯誤するも上手くいかない。。top、left<->rightに指定すると狙った親要素内に収まっているはずなのだけど、bottomを指定すると画面から消える！！（ちなみに、どれも0指定。）

結局は、親要素のCSSにoverflow: hidden;を追加することで解決。
これは仕様上のことで、「親要素内に別の子要素がある場合で、その子要素がfloat属性を持っている場合、その子要素の高さは親要素の高さに反映されない」のだそうです。
私の場合も指定したい親要素が内包する子要素全てがfloat属性を持っていたので、親要素は高さが全くない（不安定な？）状態になっていました。
この状態で子要素にposition:absolute;とbottom:0;を指定するとどっかに飛んで行ってしまうみたいです。

そこで、子要素を全て包む親要素の高さを確保するのがoverflow: hidden;。
それ以外にも、clearfixでclass指定してあげても良いみたいなのですが（親要素のdivにclass=”clearfix”を指定して、CSSにclearfixを記述する。詳細はリンク参照）、こちらは私の場合はうまく作動しませんでした。なんでだろ？

とりあえず、下のサイトに詳しいことが書いてあるので、同じようにハマった人はご参照ください。
しかし、これ多分、当たり前のことなんだろうけど初心者にはキツイわ～（汗）相当時間がかかってしまった…編集も残ってるのに。。

参考サイト：
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

※これ、本当によくまとまってるので初心者は必見です！

Tweet