CSSの配置位置

<p>フロントエンド Web ページ レイアウトでは、同じ平面上にレイアウトする場合、Web ページ要素の位置を特定するために主に float 属性を使用します。しかし、ポップアップレイヤーやフローティングレイヤー、ページ広告プラグインなどは、どれもCSSで位置属性が必要であり、その位置が絶対値なのか相対値なのかが初心者にとっては不明瞭な場合が多いです。待ってください。初心者の役に立つことを願って、position 属性のこれら 3 つの値の基本的な使い方を簡単に紹介しましょう。 </p> <p> </p> <p>1. 位置の絶対位置決め</p> <p> 位置の絶対的な位置決めは 2 つのカテゴリに分類できます: </p> <p> A: 要素には Position:absolute が定義されており、その親フレームには位置属性が定義されていません。このときの絶対位置は、ブラウザの左上隅の 0 点を基準に位置が計算されます。そのため、要素はドキュメント フローから独立します。スペースを占有します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。その位置は親フレームの影響を受けず、ページの端からのみ計算されます。コードは次のとおりです: </p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_894477" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number15 index14 alt2"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number16 index15 alt1"><code class="html plain">left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>　　</p> <p>效果如下图：</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211422081994574.gif" class="lazy" alt=""></p> <p> </p> <p>B：给元素定义了position:absolute，其父框架定义了position:absolute\position:relative\position:fixed属性。此时的绝对定位就是相对于父框架最边缘最边缘来进行定位的，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置只在父框架内做变化，代码如下：</p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_777664" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number15 index14 alt2"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number16 index15 alt1"><code class="html plain">left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <p>効果は以下の通りです</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211430059025833.gif" class="lazy" alt=""></p> <p> </p> <p>そのため、ディスプレイの解像度やブラウザのウィンドウサイズなどに制限されることなく、親要素内でのページ要素の位置を定義したい場合は、オプション B を使用することをお勧めします。 </p> <p> </p> <p>2.相対位置決め(相対位置決め)</p> <p> 要素を相対的に配置すると、まずその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対配置では、要素が移動されるかどうかに関係なく、要素は元のスペースを占有し続けます。したがって、要素を移動すると、要素は他のボックスを覆うことになります)。 </p> <p>relative は、それ自体に対して相対的に配置されます。親 DIV は、値を指定せずに、position:relative を設定します<br>、子要素の参照として機能します。 </p> <p> </p>3. 位置固定 固定では、配置時に常にボディをオブジェクトとして使用し、常に「left」、「top」、「right」、「bottom」属性を使用して要素をブラウザー ウィンドウに従って配置します。 <p> </p> <p> </p>position の使用法については他にもたくさんあるようですが、編集者の言語構成スキルはあまり良くありません。<p> 使用法を要約しましょう。 </p>ドロップダウンのセカンダリ メニュー効果を作成する必要がある場合は、親要素にはposition:relativeが必要で、内部のドロップダウン要素にはposition:absoluteが必要です。 <p> </p>ページ上にフローティング広告を作成したり、ページの先頭に戻るボタンを作成する必要がある場合は、position:fixedが必要です。 <p> </p> <p> </p>通常、絶対位置指定レイアウトにはposition:absolute;position:relativeを使用し、CSSで位置指定を定義し、位置指定にはposition:relativeが使用される場所と、位置指定に使用される場所に注意してください。左と右、上、下を協力して特定の位置を見つけます。絶対位置指定 親がposition:relativeを使用せず、直接position:absolute絶対位置指定を使用する場合、bodyタグが親として使用され、position:absoluteで定義されたオブジェクトが何層であってもドラッグアウトされます。 を親 (参照レベル) として絶対配置を実行します。絶対位置指定は非常に簡単に使用できますが、乱用してあらゆる場所で使用しないように注意してください。これにより、上下左右の間の距離を計算するのが面倒になり、CSS コードが肥大化する可能性があります。 . 適切に使用し、使用される場所で使用する方が実用的です。 <p> css z-index を使用して、絶対配置中に CSS レイヤーの重なり順を定義できます。 <br>同時に、左、右、下、上の値については、(Photoshop) PS スライス ツールを使用して正確な値を取得できます。 <br> </p> <p> </p>最後に、エディターは、position:absolute 属性を使用して子 DIV を親 DIV に配置し、親 DIV に定義がない場合 (親 DIV が埋められ、他の要素によって占有されている場合) に注意してください。 ）、まだ必要です。この時点では、サブ DIV を left、top、right、bottom で定義する必要はありません。margin-top と margin-left を使用できます。ただし、この方法は ie6/7 および ie8/9/10/11 では使用できません。ie6/7 では、css Hack を使用する必要があります。コードは次のとおりです。 : <p> </p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_228223" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1<div class="line number1 index0 alt2"> </div>2<div class="line number2 index1 alt1"> </div>3<div class="line number3 index2 alt2"> </div>4<div class="line number4 index3 alt1"> </div>5<div class="line number5 index4 alt2"> </div>6<div class="line number6 index5 alt1"> </div>7<div class="line number7 index6 alt2"> </div>8<div class="line number8 index7 alt1"> </div>9<div class="line number9 index8 alt2"> </div>10<div class="line number10 index9 alt1"> </div>11<div class="line number11 index10 alt2"> </div>12<div class="line number12 index11 alt1"> </div>13<div class="line number13 index12 alt2"> </div>14<div class="line number14 index13 alt1"> </div>15<div class="line number15 index14 alt2"> </div>16<div class="line number16 index15 alt1"> </div>17<div class="line number17 index16 alt2"> </div>18<div class="line number18 index17 alt1"> </div>19<div class="line number19 index18 alt2"> </div>20<div class="line number20 index19 alt1"> </div>21<div class="line number21 index20 alt2"> </div>22<div class="line number22 index21 alt1"> </div>23<div class="line number23 index22 alt2"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code> </div> <div class="line number2 index1 alt1"> <code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code><div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">img</code> <code class="html plain">src="1.jpg" width="600" height="600" /></code></div> <div class="line number15 index14 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number16 index15 alt1"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">margin-left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain">margin-top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number23 index22 alt2"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <p>効果は以下の通りです</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211508339809201.jpg" class="lazy" alt=""></p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211509133554672.jpg" class="lazy" alt=""></p> <p>CSS ハックコードを使用した後: </p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_306366" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> <div class="line number23 index22 alt2">23</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">img</code> <code class="html plain">src="1.jpg" width="600" height="600" /></code></div> <div class="line number15 index14 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number16 index15 alt1"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">margin-left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain">margin-top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number23 index22 alt2"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <p>さまざまなバージョンのブラウザでの効果は次のとおりです</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211511280741216.jpg" class="lazy" alt=""></p> <p>この方法は使用しないことをお勧めします。ブラウザのバージョンが異なる場合は、CSS Hack を使用して前後に調整する必要があります。 </p> <div id="MySignature"></div> <div class="clear"></div>