W3School TIY Editor
W3CSTUDY オンライン チュートリアル
方向を変更
ダーク モード
コードの実行
<!DOCTYPE html> <html> <head> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } </style> </head> <body> <h1>position: absolute;</h1> <p>position: absolute; の要素は、(固定などのビューポートを基準とするのではなく) 最も近い位置にある祖先を基準にして配置されます。</p> <div class="relative">この div 要素は、positiontion: relative; を設定します。 <div class="absolute">この div 要素は position: absolute; を設定します</div> </div> </body> </html>