フリーランスのウェブクリエーターが日々の気付きや日常の出来事を備忘録的にまとめています

position:relative;とposition:absoluteで位置指定した際、IE6でズレる

しばらくハマってしまったが、親要素にwidth:100%を入れる事で無事解決！

htmlソース

＜div class=”bt_keisan”＞

＜p＞（ボタンの右に表示する文字）</p＞

＜input type=”hidden” name=”action” value=”calculate” /＞

＜input type=”submit” value=”ボタン” /＞

＜/div＞

CSSソース

.bt_keisan {

text-align:center;

margin:10px 0 0 ;

position:relative;

width:100%;

}

.bt_keisan p {

position:absolute;

left:50%;

top:50%;

margin:-8px 0 0 40px;

}

最近よく使う便利なスタイルシートをメモ。

親に「position:relative」で基準点を決め子孫に「position:absolute;top:10px;left10px;」等で、ポイントを配置するというスタイルシートです。

後からこのスペースにクローズボタンを置きたい！とか透過pngのワンポイントと置きたい！とか使い道はいろいろあるだろうけど、これは便利でよく使用しています。

料金表など、テーブルがいくつも出てくる場合のスマートな指定の仕方を模索中です。

地元のクリスマスツリー！

→ホームページ制作・WEBシステム開発