ホームページ >ウェブフロントエンド >htmlチュートリアル >位置の混乱、解決に役立ちます_html/css_WEB-ITnose
位置の混乱、解決に役立ちます_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 08:49:001091ブラウズ
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .parent{ background: red; position: absolute; left:60px; width: 300px; height: 300px; } .childRight{ background: blue; width: 240px; position: relative; right:60px; } .child-Right{ background: yellow; width: 240px; position: relative; right:-60px; } .childLeft{ background: blue; width: 240px; position: relative; left:60px; } .child-Left{ background: yellow; width: 240px; position: relative; left:-60px; } </style></head><body> <div class="parent">parent <div class="childRight">childRight</div> <div class="child-Right">child-Right</div> <div class-"childLeft">childLeft</div> <div class="child-Left">child-Left</div> </div> <div style="width:300px;height:300px;border:1px solid #000">hello</div></body></html> 親タグは絶対配置に設定されており、子タグは相対配置に設定されています。1. なぜ右: 60px と左: -60px なのか。同じで、3 番目の子タグ (.childLeft) も色が表示されないのはなぜですか?
ディスカッションへの返信 (解決策)
はい、
相対配置の場合、要素は元の位置に基づいてオフセットされ、プラス 60 ピクセルの右オフセットはマイナス 60 ピクセルの左オフセットと等しくなります。
色を表示しないのはなぜですか
8e655fb6b9996c9afc3890cd297bf776childLeft16b28748ea4df4d9c2150843fecfba68
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。