CSS：オブジェクトを1つ上に移動するにはどうすればよいですか？

Question

HTML：

<div id="a">A</div> 
<div id="b">B</div> 

CSS：

#a { 
    float: left; 

    width: 30px; 
    height: 30px; 
    color: white; 
    background-color: red; 
    border: 1px solid black; 
    text-align: center; 
} 

#b { 
    margin-left: 25px; 

    width: 30px; 
    height: 40px; 
    color: white; 
    background-color: green; 
    border: 1px solid black; 
    text-align: center; 
} 

ここに私のコードを参照してください：http://jsfiddle.net/mxtdg/を。

AがBを超えているようですが、BをAより上にしたい場合はどうすればいいですか？

Answer 1

position:relativeとを#bと入力すると、そのトリックが行われます。

デモ：jsfiddle.net/Marcel/mxtdg/7/

Answer 2

また、あなたが位置を調整するためのマージンを使用すると「b」をフロートすることができます。これらの両方が浮動している場合、この場合はzインデックスを変更する必要はありません。「b」はHTMLの順序のため「a」の上に表示されます。

http://jsfiddle.net/mxtdg/12/

Answer 3

そのあなたが定義する際に使用すると、1つの事のZインデックスを覚え上記望んでいるし、任意ののdivまたはIDから値にのみ機能します位置とZインデックスを定義することができ、簡単な特にあなたが上にしたいdivまたはidの位置。

HTML

<div id="a">A</div> 
<div id="b">B</div>  

CSS

#a { 
    float: left; 
    width: 30px; 
    height: 30px; 
    color: white; 
    background-color: red; 
    border: 1px solid black; 
    text-align: center; 
} 

#b { 
    margin-left: 25px; 
    width: 30px; 
    height: 40px; 
    color: white; 
    background-color: green; 
    border: 1px solid black; 
    text-align: center; 
    position:relative; 
    z-index:10; 
} 

やデモを参照してください。 - - ：

は、あなたが更新されたコードを参照http://jsfiddle.net/mxtdg/19/