CSSでは、中央のレイアウト上にロゴを配置して左に突き出しますか？

Question

私は本当にここにこだわっています...

私は中心レイアウト（それは約922pxの幅、ページの中央に位置しています）...私は左上にある小さなロゴを持っていますこれは中央のデザインの左に約10ピクセルほど張り付いています。あなたが想像することができれば、それはデザインの左側に出ています...

今、私は絶対的な配置がこれを起こさせると言われました。しかし、デザイン自体がページの中央にある場合、ロゴがどのように絶対配置で動作するかはわかりません。私はこれがIE6で動作することを確認することだと思う...私は、中央ヘッダーにロゴを浮かべて試して、margin-left: -10px;の負のマージンを適用するが、これはIE6では動作しませんを読んだことがあります。

Answer 1

コンテナdivに「position：relative」を設定します。

<style type="text/css"> 
    div.page { 
     position: relative; 
     margin: 0 auto; 
     width: 922px; 
    } 
    div.page img.logo { 
     position: absolute; 
     left: -10px; top: 0; 
    } 
</style> 


<div class="page"> 
    <img class="logo" ... /> 
</div> 

けれども..私はむしろそれが絶対位置なしで動作するだろう。

Answer 2

コードのスニペットがなくてもわかりにくいですが、要素がどこから取得されているのかはおそらく問題です。 「絶対」は誤称です。実際には、「最も近い位置にある親との相対的な絶対値」を意味します。だからあなたのデザインでは、あなたはcssの "位置"スタイルの親要素を持っていないので、body要素（ブラウザに応じてマージン/パディングがあるかもしれません）からその位置を取るようになります。

位置の追加：相対; 「最外」のコンテナにしたい要素には、その中の項目に対する絶対位置を指定し、そこからの正確な座標を指定することができます。

Answer 3

あなたのロゴを絶対に配置するときは、何かに相対的に配置する必要があります。これは通常、ビューポートエッジです。ロゴが相対的に配置されている要素の内部にある場合、代わりにその要素に対して相対的に配置されます。だから答えはあなたの中心にあるページ区画をdisplay:relative;にすることです。そのため、ロゴは常にブラウザウィンドウの端ではなくページに揃えられます。次に例を示します。

HTML：

<div id="centeredpage"> 
    <img id="logo"... /> 
</div> 

CSS：

body { 
    text-align:center; 
} 
#centeredpage { 
    width:922px; 
    margin:0 auto; 
    text-align:left; 
    position:relative; 
} 
#logo { 
    position:absolute; 
    top:0; 
    left:-10px; 
} 

私はそれが役に立てば幸い。