相対配置要素のtopプロパティの%値がpx値で扱われる

症状

相対配置した要素に対してtopプロパティを%値で指定すると、その数値はpx単位で配置される。具体的には、 top: 30%;top: 30px; であるかのように扱われる。

例示

<div style="width:100px; height:150px; border:2px solid red; float:left;">
<div style="position:relative; top:50%; border:2px dashed blue;">A</div>
</div>
<div style="width:50px; height:75px; border:2px solid maroon; float:left;">75px</div>
<div style="width:50px; height:50px; border:2px solid green; float:left;">50px</div>
50%?
75px
50px

高さ150pxのdiv要素内の、上から50%の位置に青いボーダーのdiv要素を配置しています。横にあるものは比較用に置いたdiv要素で、緑のボーダーを持つ要素は高さを(150pxの50%で)75pxに、茶色のボーダーを持つ要素は高さを50pxにしています。

スクリーンショット

Moz1.0.1Moz1.0.1での表示

Op6Opera6.05での表示

修正状況

Opera6.05では不具合の発生が確認されました。Opera7.0では標準・互換モードともに不具合の発生は確認されませんでした。

スポンサーリンク

関連記事

スポンサーリンク

Drupal(ドルーパル)

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る