なぜ、つまり、右の絶対配置ロゴですか？

Question

これは私のCSSコードです：

#header { 
    width: 900px; 
    margin-left: 0; 
    position: relative; 
    text-align: left; 
    clear: left; 
    float: left; 
} 
#logo { 
    z-index:-1; 
    position:absolute; 
} 

とhtml ...

<div style="text-align: center;"> 
    <div id="wrapper"> 
     <div id="header"> 
      <!--Logo--> 
      <div id="logo"> <a href="http://projectstratos.com/" title="Home"><img src="logo-transparent.png" border="0"></a> 
      </div> 
      <!--End Logo--> 
     </div> 
    </div> 
</div> 

ロゴは、絶対、私のコンテンツの下に滞在する必要があります。 Firefoxでは素晴らしいですが、つまり、ロゴは左の代わりに右に表示されます。私は中心divの代わりにマージンの方法を使用しているので、それは動作しません！

どうすれば左に移動できますか？

Answer 1

それは中心からオフセットする必要があり、あなたがロゴの幅を知っているなら、あなたは50％に左幅、セットを設定し、それを中央に負のマージンを使用することができます。一度センタリングすると、マージンに追加して中心からのオフセットを得ることができます。

例：IEのバージョン

#logo { 
    position:absolute; 
    left:50%; 

    margin-left:-250px; /* This negative margin gets the logo in the centre */ 
    /* Adjust this value to get the offset you want. If you want to have it 100px to the left make it -350px, if you want it 50px to the right make it -200px */ 

    width:200px; 
    z-index:-1; 
} 

Answer 2

あなたは左上を試すことができますか？

#logo { 
    top: 5px; 
    left: 20px; 
    z-index:-1; 
    position:absolute; 
}