CSS Position Relative

Question

私は、以前の要素に相対的なテキストを配置しようとしています。だから私は4つのボックスと1つのコンテナ、最初と2番目の要素の作品が、問題が開始されます。各行に2つのボックスがある2つの行が想定されています。

BOX1 | Box2 Box3 | Box4

しかし、それをすることになっているようBOX3は表示されません。クロムで

http://homeweb.mah.se/~M09K0291/test.htm

iが3番目のボックス実際のボックスの下とIEでボックス3からテキストが 第ボックスの後ろにあり得ます。

アイデア？

Answer 1

div.c { 
clear:left; 
position:relative; 
top:-100px; 
} 

div.d { top:-200px; } 

Answer 2

あなたはとにかくボックスの明示的な高さと幅を定義しているので、それだけで.page1上position: relativeセットで絶対位置を使用することがおそらくより明確かつ堅牢です。例えば

：

.page1 { position: relative; } 
.a, .b, .c, .d { position: absolute; } 
.a { top: 0; left: 0; } 
.b { top: 0; left: 100px; } 
.c { top: 100px; left: 0; } 
.d { top: 100px; left: 100px;} 

参照：http://jquery.nodnod.net/cases/597

EDIT：

あなたは絶対位置を使用したい、またはtopとleftを避けるためにしたくない場合は、あなたも使用することができます浮動小数点数：

.a, .b, .c, .d { float: left; } 
.a, .c { clear: left; } 

Yoまた、のフロートクリアをclearfixのような方法で適用する必要があります。

参照：http://jquery.nodnod.net/cases/598

Answer 3

位置の相対位置、それが通常だろう場所に対する元素。要素はドキュメントのフローから取り出されません。したがって、要素を移動すると、要素の配置に影響します。

包含ブロックに対する要素の相対的な位置を指定します。要素は文書の流れから取り出され、移動することはページの他の要素には影響しません。あなたは相対位置を使用している場合は、相対positoning

を使用して

例は、要素がトップと左に移動されます。

div.fyrkant 
{ 
    height: 100px; 
    width: 100px; 
    position:relative; 
} 
div.a 
{ 
    background-color: #b5e274; 
} 
div.b 
{ 
    background-color: #e2d974; 
    left: 100px; 
    top:-100px; 
} 
div.c 
{ 
    background-color: #e2b074; 
    top: -100px; 
} 
div.d 
{ 
    background-color: #e27e74; 
    top: -200px; 
    left: 100px; 
} 

あなたが使用トップと左をしたくない場合は、浮動小数点数を使用して調査し、この問題のためにクリアしなければなりません。最高のクロスブラウザのソリューションは、あなたのHTMLにマークアップを追加関与しようとしているフロート

を使用して

例。あなたが望むのはブロックの2行です。各行をdivで囲みます。.rowはブロックが含まれて隠されたフロートをクリアします：

<div class="page1"> 
    <div class="row"> 
     <div class="a fyrkant">test a 
     </div> 
     <div class="b fyrkant">test b 
     </div> 
    </div> 
    <div class="row"> 
     <div class="c fyrkant">test c 
     </div> 
     <div class="d fyrkant">test d 
     </div> 
    </div> 
</div> 

はその後、オーバーフローがあなたのCSSに

div.fyrkant 
{ 
    height: 100px; 
    width: 100px; 
} 
.row {overflow:hidden;zoom:1;} 
.a, .b, .c, .d { float: left; } 

を追加します。あなたが持っていない場合、行は高さがなく、行は同じ行にあります。 overflow：hiddenはie6では機能しませんが、zoom：1は（haslayoutを呼び出します）