どうしても解決しない
状態:-
閲覧数:3,319
投稿日:2013-12-31
更新日:2018-01-14
・position:absoluteは使い勝手が悪い
・大抵、親要素にstatic以外(relative)を指定して使用することになる
・ところが、親要素にrelative指定しているのに、どうしても内容が表示されない現象に遭遇
・大抵、親要素にstatic以外(relative)を指定して使用することになる
・ところが、親要素にrelative指定しているのに、どうしても内容が表示されない現象に遭遇
原因判明 → 親要素には高さが必要
原因判明
・親要素「<div id="gamestage"></div>」には高さを設定していない
// ピースを配置する。
for (var i = 0; i < 16; i++) {
$('<div id="piece' + i + '" class="piece"></div>').css({
backgroundPosition: '-' + getx(i) + 'px -' + gety(i) + 'px',
left: getx(pos[i]), top: gety(pos[i])
}).appendTo($('#gamestage'));
}
対応案2種類
・何れでもOK
A案
・親要素に高さ指定
B案
・<br>タグをたくさん書く
言いたいこと
「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定
「要素{position:absolute;}親要素{position:absolute;}」と「要素{position:absolute;}親要素{position:relative;}」の違い