CSS 相対位置決めの参照オブジェクトとは:
位置決めなので、参照となる参照オブジェクトがなければなりません。そうでないと、top、left、bottom、right の属性は使用できません。
以下は、絶対配置オブジェクトの参照オブジェクトについて簡単に説明します。まず、位置決めを使用しないコード例を見てみましょう:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:200px; height:200px; border:1px solid red; margin:30px;}.children{ width:100px; height:100px; background-color:green;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html>コードは期待どおりに実行されます。サブディビジョンの相対位置決めを実行するコードを見てみましょう:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:200px; height:200px; border:1px solid red; margin:30px;}.children{ width:100px; height:100px; background-color:green; position:relative; left:20px; top:20px;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html>上記のコードは、サブディビジョンの相対位置決めを実行します。ブラウザ上のコードのパフォーマンスから判断すると、相対位置の参照オブジェクトは親 div であると思われるかもしれませんが、実際にはこれは単なる幻想です。相対位置決めの基準となるオブジェクトはオブジェクトそのものであり、オブジェクトの左上隅を原点とし、水平方向を X 軸、垂直方向を上、左、下と考えることができます。右の属性はこの座標軸に基づいて配置されます。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/939.html
最も元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod= viewthread&tid= 4684
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
