Home > Windows > Mozilla > Netscape 親要素をはみ出すように配置した要素内のリンクやフォームが機能しない

親要素をはみ出すように配置した要素内のリンクやフォームが機能しない

親要素を相対配置に、子要素を絶対配置にして、子要素のボックスが親要素のボックスをはみ出すように配置したとき、子要素内のリンクやフォームコントロールが機能しなくなる場合がある。

Netscape6/7：親要素がインライン要素のとき、子要素内のリンクやフォームは機能しない。
Netscape6：子要素のleft, topプロパティに負の値を指定して親要素のボックスからはみ出させたとき、子要素内のリンクやフォームは機能しない。

Category: Mozilla, Netscape, Windows
Tag: form

例示

<div style="position:relative; top:1em; background:aqua;">親
    <div style="position:absolute; top:-1em; background:yellow;">
        <a href="./">N6で使用不能</a>
    </div>
</div>
<span style="position:relative; top:1em; background:aqua;">親
    <span style="position:absolute; top:1em; background:yellow;">
        <a href="./">N6/N7で使用不能</a>
    </span>
</span>

親

N6で使用不能

親 N6/N7で使用不能

2つのリンクがあります。前者はtopプロパティに負の値を指定した場合の例、後者は祖先に相対配置されたインライン要素が存在する場合です。リンクが機能するかを確認してください（:hover擬似クラスで背景色を変えています）。