2

別のdiv（200x200）の中央に小さなdiv（50x50）を配置したいと思います。

私はそれを行う2つの方法があります：

絶対位置と相対位置を使用

position:relative
position:absolute
top:75px;
left:75px;

また

ネガティブマージンの使用

margin:-125px 0 0 75px;

どちらの方法が良いのか、そしてその理由を知りたいのですが…
一部の人がそのポジションは推奨されないと言っているのを聞きました。それは本当ですか？なぜ？

編集：
divは例です。
実際には、別の画像の上に画像が表示されます（YouTubeプレビュー画像とその上の再生ボタン画像）。
画像はアコーディオンの内側にあり、ie6でアコーディオンを閉じる/開くと、絶対コンテナがすべての上に浮きます...

4

3 に答える 3

4

使用absoluteとrelative配置に問題はありません。長い間完全にサポートされています。あなたの2つの方法のうち、絶対位置と相対位置の1つを確実に使用します。マージンの1つは少しハックです。

個人的には、どちらの方法も使用せず、代わりに#small内側に入れます。#big意味的にもう少し正しいからです（#small内にあるため#big）。

jsFiddle を参照してください

HTML

<div id="con">
    <div id="big">
        <div id="small"></div>
    </div>
</div>

CSS

#big {
    width:200px;
    height:200px;
    background:red;
    position:relative;
}
#small {
    position:absolute;
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
    left:50%;
    top:50%;
    background:blue;
}
于 2013-03-09T09:39:40.010 に答える
1

ポジションは、使い方がわからない人にはお勧めしません。それ以外の人にとっては、まったく問題なく機能します。

私は間違いなく負のマージンを使用しません.. Tyriarが言ったように、それはハックであり、読みにくいです.

ie6 のバグに関しては、ie にはたくさんのバグがあります。それらに対処する方法は、ie のためにサウンド html をハッキー html に退化させるのではなく、フェイル セーフ コードでサウンド html/css を補完することです。

于 2013-03-09T11:11:08.113 に答える
1

マージンを使用する方が良いです！使用する場合

position:relative
position:absolute

外部の div との相関関係を理解する必要があります

于 2013-03-09T09:38:33.590 に答える