0

私は本当にここで立ち往生しています...

中央レイアウトのサイト レイアウトがあります (ページの中央に約 922 ピクセルの幅があります)...この左上に小さなロゴがありますが、中央のデザインの左側に約 10 ピクセル付いています。 . ご想像のとおり、デザインの左側に突き出ています...

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

4

3 に答える 3

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>

でも..私は絶対的な位置付けなしでそれを機能させたいと思います。

于 2009-04-01T20:43:17.600 に答える
1

コードのスニペットがないとわかりにくいですが、おそらく、要素がどこから「絶対」の位置を取得しているかに問題があります。「絶対」は誤称です。それは本当に「絶対...最も近い位置にある親に相対的」という意味です。そのため、デザインに css の「位置」スタイルを持つ親要素がない場合は、body 要素から位置を取得します (ブラウザーによっては、マージン/パディングがある場合があります)。

位置の追加: 相対; 「最も外側」のコンテナにしたい要素に移動すると、その中のアイテムに position: absolute を指定し、そこから正確な座標を指定できます。

于 2009-04-01T20:48:55.620 に答える
1

ロゴを絶対的に配置する場合は、何かに対して相対的に配置する必要があります。その何かは、通常、ビューポートの端です。ロゴが相対的に配置された要素内にある場合、代わりにその要素に対して相対的に配置されます。したがって、答えは、中央のページ div を作成して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;
}

それが役立つことを願っています。

于 2009-04-01T23:50:49.037 に答える