ホームページ > 記事 > ウェブフロントエンド > CSS 学習ノート -- 属性の配置について学ぶ_html/css_WEB-ITnose
CSS 学習ノート -- 属性の配置について学ぶ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:571204ブラウズ
今日を学ぶ前に残っている質問が 1 つあります。CSS のposition 属性です。まず、位置に関連する問題を要約します:
- 属性として、属性値はいくつありますか?
- 位置の一般的に使用される属性値は何ですか?彼らの特徴は何でしょうか？
最初の質問: 位置は属性です。どのような属性がありますか?
position 属性の場合、合計 5 つの値、つまり
- static: デフォルト値があります。配置を行わない場合、要素は通常のフローに表示されます。
- relative: 通常の位置を基準にして相対的に配置された要素を生成します。通常の位置とは、position 属性がなかった場合に表示される位置を指します。
- absolute: 静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。ここで、絶対の参照オブジェクトは、後で詳しく説明する非静的位置属性を持つ最初の親要素であることに注意してください。
- 修正: ブラウザ ウィンドウを基準にして配置された絶対位置の要素を生成します。
- position 属性の値が親要素から継承されることを指定します。
この種の質問については、通常、最も標準的な回答が W3cSchool で見つかります。これらの 5 つの属性の説明はすでに非常に詳細です。実際、開発では相対、絶対、固定の 3 つの属性のみを使用することがよくあります。また、これらの属性のいずれかを要素に追加する場合は、要素の left/top/right/ も設定する必要があります。 bottom と z-index では、要素の位置は「left」、「top」、「right」、「bottom」属性によって指定され、表示レベルは z-index によって制御されます。
2 番目の質問: 一般的に使用される位置の属性値は何ですか?彼らの特徴は何でしょうか？
上記では、よく使用される 3 つの属性値、相対、絶対、固定について説明しました。
relative: 要素の位置属性が相対に設定されると、要素は 以前の位置を基準として使用し、設定された left およびその他の値に従って移動します。ここに例があります~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 100px; height: 100px; background-color: #0044aa; margin: 5px; } #div2{ width: 100px; height: 100px; background-color: #e13b00; margin: 5px; position: relative; left: 50px; top:50px; z-index: -2; } #div3{ width: 100px; height: 100px; background-color: yellow; margin: 5px; } </style></head><body> <div style="height: 1000px"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div></body></html> コードの効果は次のとおりです:
2 番目の div は前の位置に基づいて移動されます 、その前の位置は次の要素によって占有されません 。 Z-index の影響により、赤い div は黄色の div で覆われます。
absolute:position 属性が static の場合、静的配置以外の最初の親要素を配置します。ここで、この文を詳細に分析する必要があります。 まず、絶対位置指定によって参照されるオブジェクトは、位置指定属性を持つその親要素であると判断できます。その場合、この親要素の位置属性は静的であることはできません。
ここでもっと慎重に考えてください: 要素にposition 属性を持つ親要素がない場合はどうなるでしょうか? この場合、ページのルートノードである 100db36a723c770d327fc0aef2ce13b1 タグに従って配置されます。 (100db36a723c770d327fc0aef2ce13b1 タグであることに注意してください)
効果を確認するために div2 の位置属性を絶対値に変更します:
このようにして、赤い div が移動される前の位置が、黄色のもの この時点では、実際には赤い div を意味し、ドキュメント フローから分離されています。
最後の属性値: 固定。その効果は実際には絶対と似ており、両方とも絶対配置に属しますが、その参照は固定ブラウザ ウィンドウです。 div2 の位置属性を固定に変更した後、マウスのスクロール ホイールを回転させると効果が表示されます。この機能を使用すると、サイド フローティング ウィンドウ (一部の Web サイトの側面にある小さな広告) のようなものを作成できます。 )ノ彡┻━ ┻)こんな効果。
実際、位置を学習する過程で、要素の参照オブジェクトを習得することが、位置属性を決定し、その型に基づいて後続の要素の状態を判断するための鍵であると感じました。属性値を入力すると、要素が決定されます。それがあなたの場所です~
追記: この数日間、自分で質問して答えを見つけるという学習プロセスを通じて、私は本当に多くのことを学びました。実際、通常の学習プロセスでは無視される細部がまだたくさんありますが、このようなプロセスを経た後、知識を共有するためにブログを使用することは幸せなプロセスであることもわかりました。 、そしてそれはプログラミングスキルを向上させ、自分の表現力を向上させることができ、他の人を助けることもできるかもしれないので、それを続ける必要があります。 ！ (╰_╯)#
2016年1月11日
小さな一歩を踏み出さなければ、千マイルに到達することはできません