ホームページ > 記事 > ウェブフロントエンド > CSS位置の相対位置と絶対位置の違いを1枚のpicture_html/css_WEB-ITnoseで理解する
CSS位置の相対位置と絶対位置の違いを1枚のpicture_html/css_WEB-ITnoseで理解する
- WBOYオリジナル
- 2016-06-24 11:40:431206ブラウズ
位置には次の属性があります: static、inherit、fixed、absolute、relative
最初の 3 つは理解しやすく区別しやすいです:
static: これはデフォルトの状態であり、位置決めはなく、要素は通常のフロー (上、下、左、右、または z-index 宣言を無視します)。
nherit: 親要素からposition属性の値を継承します。
修正: ブラウザウィンドウを基準にして相対的に配置された絶対配置要素を生成します。 (つまり、ブラウザをスクロールすると、要素は常にウィンドウの表示領域の特定の位置に表示されます)。
初心者が混乱する可能性がある最も一般的に使用される 2 つは、絶対と相対の違いです。
1. まず、W3C によって与えられた概念を見てみましょう
absolute: 絶対配置要素を生成し、静的配置以外の最初の親要素を基準にして配置します。
relative: 通常の位置を基準にして相対的に配置された要素を生成します。
2 つの主な違いは です。絶対は親要素内の他の要素の影響を受けませんが、相対は親要素内の他の要素の影響を受けます。
2. 1 つの図で絶対と相対の違いを理解する
コード:
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style> html,body,div,p{ margin: 0; padding: 0;} #baba { position: absolute; left: 50px; top:50px; width: 300px; height: 300px; background: blue;} #baba p{ background:lightblue;} #erzi { position: absolute; left: 50px; top:50px; width: 200px; height: 200px; background: yellow;}</style></head><body id="body"><div id="baba"><p></p><div id="erzi"><p></p></div></div><script>var baba=document.getElementById("baba"), erzi=document.getElementById("erzi"); baba.children[0].innerHTML="我是"+baba.id; erzi.children[0].innerHTML="我是"+erzi.id; </script></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。