positionプロパティ/23号/03-6(3)

16198 ワード

テキストリンク

postion : relative

floatはレイアウトビューでよく使われるプロパティです
positionは、領域内に小さな要素の座標を設定して配置するためのより細かい粒度の機能です.
positionは、親位置に対して取得される属性です.
floatプロパティを使用する場合に比べて、位置をより細かく調整できます.

postion : relative
left, 
top,
bottom,
right,

positionプロパティと方向プロパティ(left、right、top、bottom)は通常一緒に使用されます.
(方向プロパティに基づいて距離を指定)
MDN position属性説明

基本コード

position:相対属性のコードを追加

赤の真下にあった青い箱を相対的な属性で元の位置に移動します.

すなわち、相対属性は、自身(その要素)に対する元の位置に位置を設定する.

△次のposition:absolute説明の最後にposition:relativeの説明があります.

<hr/> <h2>postion : absolute</h2> <hr/><pre><code class="language-javascript"><div class="wrap"> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div></code></pre> <pre><code class="language-css">//CSS .wrap { width: 600px; border : 5px solid black; margin: 50px auto; } //float 버그 해결 .wrap::after { content : ""; display: block; clear : both; } .wrap .left { width: 300px; height: 300px; background-color: blue; /*float: left;*/ } .wrap .right { width: 300px; height: 300px; background-color: red; /*float: left;*/ } .wrap .bottom { width: 600px; height: 100px; background-color: green; /* float: left; */ }</code></pre> 1. デフォルト <img src="https://s1.md5.ltd/image/60c07a8087b8fced872ec75db698570c.png"/> 2.floatからleft、right要素へ:leftの追加 左、右にのみ浮動:左属性を適用し、下に適用しない場合 最後の下部は含まれません.(親が底を認識できない) つまり、ある要素が特定の領域(wrap)内でフローティング(現在は左、右)されている場合、 bottomがfloat属性を必要としない場合でも、親要素が残りのサブ要素(bottom)を識別して保護できるようにfloat属性を適用する必要があります. (bottomはフロートなしで床を敷こうとしたことがある.) <img src="https://s1.md5.ltd/image/b813aa1aa59f677007223e7db90b3e62.png"/> 3. すべての要素にフローティングすべての要素:leftを追加 left、right、bottomともにfloat:leftプロパティを適用する場合、 (実際には、下部にfloation:leftプロパティが適用されますが、隣に貼るスペースがないので、下部にあります.) <img src="https://s1.md5.ltd/image/c16a04819fb2f80f9fcd73e0ea8ce27d.png"/> 第1、2、3コースのcodepen練習 <iframe class="embed"scrolling="no"src="https://codepen.io/tpgus/embed/eYedxzB?default-tab=html%2Cresult"allowfullscreen=""/> 4. 右側のボックスにサブアイテム(黄色のボックス)を追加<pre><code class="language-javascript"><div class="wrap"> <div class="left"></div> <div class="right"> <p class="box"></p> //추가 </div> <div class="bottom"></div> </div></code></pre> <pre><code class="language-css">//CSS ... 추가 .wrap .right .box { width: 100px; height: 100px; background-color: yellow; } </code></pre> <img src="https://s1.md5.ltd/image/2420e0989424202b9f4992657709ead1.png"/> 4-1イエローボックスの位置を変更:レッドボックスに近い5時方向 float:absoluteプロパティが使用されます. 相対的に違う点は、自分の位置を基準にするのではなく、親の要素を基準に位置を設定することです. 設定コードは以下のとおりです:<pre><code class="language-css">//CSS ... .wrap .right .box { width: 100px; height: 100px; background-color: yellow; -------추가---------- position: absolute; bottom: 40px; right: 10px; } </code></pre> <img src="https://s1.md5.ltd/image/722678475f60dfc510fc4c8ae7444bf0.png"/> しかし、予想とは異なり、赤いボックスを離れ、ブラウザの5時方向付近に移動した. position:absoluteプロパティをスクリーンから強引に取り外し、指定された位置に軽く置く感じ?</と理解できるp> ただし、要素の位置を計算する基準は、その要素の親要素に位置属性を持つ親要素に基づいています.<pre><code class="language-css">//CSS .wrap { //전체를 감싸는 부모 박스 width: 600px; border : 5px solid black; margin: 50px auto; } .wrap::after { content : ""; display: block; clear : both; } .wrap .left { width: 300px; height: 300px; background-color: blue; float: left; } .wrap .right { //빨간 박스 width: 300px; height: 300px; background-color: red; float: left; } .wrap .right .box { //노란 박스 width: 100px; height: 100px; background-color: yellow; position: absolute; bottom: 40px; right: 10px; } .wrap .bottom { width: 600px; height: 100px; background-color: green; float: left; }</code></pre>現在.wrap .right .Box(黄色Box)の両親は.wrap .ライト(赤い箱)です. でも.wrap .right(赤い箱)にはposition属性はありません. そのため、さらに上の親を探します.(.wrap) でも.wrapもpositionプロパティを設定していません. このようにして、親要素上でpositionプロパティを検索し、常に上に移動します. この例ではbody結果が標準的である.(つまり、画面全体がブラウザに表示されます) 最初に欲しかった赤い箱の5時方向に黄色い箱の位置を調整したいなら、 .wrap .right(赤枠)でpositionプロパティを設定する必要があります. positionプロパティの値から絶対値と相対値を選択する必要があります. しかしabsoluteは画面から強引に引き裂いて他の位置に軽く置いた感じです.また、前のサブロケーション:absolute設定のため、親ロケーション属性にposition属性を設定し、親ロケーション:absoluteでもある場合は、同じ操作で親ロケーション:absoluteに向かいます.します. したがって、親の領域内で相対的な位置を特定するために、親はposition:相対属性を指定します. 私たちが望む位置は親(赤い箱)を基準にしているので、赤い箱に位置を設定します:相対. 上記の相対属性は、その元の位置に基づいて再配置された属性であり、 実際、(親要素の)相対属性はposition:absolute属性のサブ要素のバインド(境界)を設定するのに使用されることが多い. posotion:座標を個別に設定せずに相対属性のみを設定すると、変化や影響はありません.(保持) ただし、positionプロパティは使用できません. すなわち、子アイテムのposition:absoluteプロパティが必要な場合は、position:を相対プロパティの親として使用することが多い. <img src="https://s1.md5.ltd/image/d9c1e8108fb9ed00de7427c32b084051.png"/> <hr/> <h2>postion : fixed</h2> <hr/> <ul><li> position:親族は自分の位置を基準にしている(実際、子供のposition:aboutsulute属性はもっとよく使われている) </li> <li> position:absoluteは、親領域に対して絶対位置を設定するためによく使用されます </li> <li> position:fixedはブラウザに基づいて位置を無条件に設定します. </li></ul> 親に対して子どもに固定する ロケーション自体はブラウザに基づいて位置決めされています. ただし、要素自体が親要素に依存するため、下にスクロールして親要素を消滅させ、子要素も消滅させることができます. <iframe class="embed"scrolling="no"src="https://codepen.io/tpgus/embed/gOoxqPo?default-tab=html%2Cresult"allowfullscreen=""/> サブアイテムのみ:ブラウザに対して場所を設定する <iframe class="embed"scrolling="no"src="https://codepen.io/tpgus/embed/abEyXNv?default-tab=html%2Cresult"allowfullscreen=""/>

Reference

この問題について(positionプロパティ/23号/03-6(3)), 我々は、より多くの情報をここで見つけました https://velog.io/@tpgus758/postion-속성-23번-03-63

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

OOPyyyyyyyyyy

[Leetcode]Container With Most Water