cssで配下の指定勘違いしておかしな事やってたのでメモ

結論としては、きちんと継承させたい(関連を持たせたい)事が分かるように書かないと駄目。

最初

１，scrollさせたいdivの定義

２，position:absoluteを使ってtableのheaderを上に固定させつつbodyだけスクールするよう

定義

この時、１で基準となるdivとその配下のdiv(scrollの指定したdev)の定義をしていて

tableヘッダはscrollの定義をしたdivの子要素だからってそういう書き方してたら、

tableヘッダ要素が意図する位置に固定されたような感じになるんだけど目には見えない

状態になった。レイヤーの上下関係とかかな？とか思っていじくり回してたけど、違った。

tableヘッダ要素は基準になるdiv配下のtheadみたいな描き方しないと駄目でした。

div#base{

posision: relative;

}

div#scroll{

スクロールの設定(html上ではdiv#baseの子要素)

}

てやっている状態の時に

ｘ div#scroll table thead ・・・これだとscroll定義されたdivの影響下(間違って無くね？)

◯ div#base table thead ・・・これだと基準divの位置を基準にして正しく表示される。

div#scrollは#baseの子要素なんだから問題無いだろうと思ってて、開発者ツールとかで確認すると

意図する位置にいるのに表示されない状態。cssからすると、htmlどう書かれているか知ったこっちゃない

ってことなんだろうね。css上でキチンとどこの配下の何の要素か書いてあげないといけんというこってす。

そうそう、tableのheaderとbodyを分けるとheaderとbodyでtdの幅が合わなくなる事がある(内容次第)ので

javascriptで無理やりbody側のtdの幅にheaderのthの幅をあわせるって事も必要です。固定幅じゃない場合。

最終的な見本を下に(htmlはめんどうなので載せてません)