TRBLとCSS_html/css_WEB-ITnoseの位置の関係-htmlチュートリアル-php.cn

TRBLとCSS_html/css_WEB-ITnoseの位置の関係

WBOY

リリース： 2016-06-24 11:16:29

オリジナル

1295 人が閲覧しました

http://andymao.com/ から転載した部分:

Absolute、CSS での記述方法は次のとおりです: Position:absolute; これは、テキストフローからの絶対的な配置を意味します (つまり、 document) Position ) は、ブラウザの左上隅を指し、TOP、RIGHT、BOTTOM、LEFT で に配置されます (以下、TRBL と呼びます)。TRBL が設定されていない場合は、デフォルトの がベースになります。親のマーキング用の元のポイントに。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。 Web ページを中央に配置するために Absolute を使用する場合、Web ページは常に解像度のサイズに自動的に適応され、

Absolute はブラウザの左上隅を元の点として使用するため、間違いを犯しやすくなります。解像度の変更に応じて変更されません

。多くの人が間違えるのはここです。左側の Web ページの特徴は Relative とよく似ていますが、それでも本質的な違いがあります。

相対、CSS での記述方法は次のとおりです: Position:relative; 要素は依然として

ドキュメント内の元の位置を占めますが、視覚的には元の位置に対して相対的に移動されます。親が無い場合は親の原点を原点として参照し、

Padding等のCSS属性がある場合はTRBLで配置します。親、現在のレベルの原点は親を参照します。レベルコンテンツ領域の原点を配置します。場合によっては、コンテナーの上位と下位の関係を設定するために z-index に依存する必要もあります。値の範囲は自然数になります。もちろん、注意すべき点は、z-index を使用して親子関係を上下に設定することはできないということです。子が上に、親が下になければなりません。

以上がポジションの使い方です。より詳細なブログがあります: http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html

私の理解部分

実際、私は上記の立場を理解しています。突然もう一度確認しますか？

理由は、今回はposition属性を書かずに、TRBLの値を直接書いたからです。コードは次のとおりです:

<style>#div1 {width:100px; height:200px; background:#CCC; right:100px;}</style><script></script> </head><body><div id = "div1">    <span>分享到</span></div><input type="button" value="bian" onclick='move()'/></body></html>

ログイン後にコピー

div1 を右に直接移動したいのですが、大丈夫ですか?

答えはノーです!

色々な箇所を確認した結果、次のことに気付きました。

位置の値が設定されていない場合、デフォルトは静的であるため、効果はありません。

今後 TRBL を使用するときは、位置設定を一致させることを忘れないでください。