【CSS】位置:絶対レイアウト_html/css_WEB-ITnoseについて

Web ページで left 属性と top 属性を有効にする必要がある場合は、この div の style 属性にposition:absolute を追加する必要があります。このようにして、この div を他の div 全体のレイアウトから解放できます。つまり、position を追加しません。absolute を使用する前は、すべての div は「[CSS] div の配置と Web ページのレイアウトについて」で説明したさまざまなレイアウトに従いました (クリックするとリンクが開きます)。

たとえば、次のコード:

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

は次の効果をもたらします:

position:absolute が削除されると、left 属性と top 属性は機能しなくなります。つまり、次のコード:

<div style="left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

この黒いボックスのあるレイヤーは、期待どおりにまったく移動していません。

ただし、左と上がブラウザの左上隅からの距離であるという意味ではありません。上位 div からの距離です。上位 div がない場合は、ブラウザの左上隅からの距離になります。この Web ページの最大のレイヤーである本文からの距離になります。

たとえば、次のコード:

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>
	<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

まず、最初のレイヤーは、最初に図解に使用されるレイヤーです。position:absolute は、どの div レイアウトにも影響されません。影響を受けましたが、私はシステムから解放されました

次に、2 番目の層には上位 div がないため、position:absolute の後の left と top は、その左上隅とブラウザの左上隅の間の距離になります

最後に、最初の 3 つのレイヤーは 2 番目のレイヤーにあり、その上位 div は 2 番目のレイヤーです。上位の div があるため、position:absolute の後の左と上は、2 番目のレイヤーの左上隅を基準とした左上隅になります。角距離。

さらに、IE6 はposition:fixed をサポートしていないため、その種のホバー効果を実現するには、position:absolute と JavaScript の使用を検討することをお勧めします。