Question

我想在另一个div（200x200）的中心放一个小div（50x50）。

我有两种方法可以做到：

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

或

Using negaive margin

margin:-125px 0 0 75px;

我想知道哪种方式更好，为什么......
我听说有些人说这个位置不推荐..是真的吗？为什么呢？

修改
div是exmaples。
实际上我将图像放在另一个图像上方（youtube预览图像，并在其上方播放按钮图像）图像在手风琴里面，在ie6关闭手风琴/打开它会导致绝对容器漂浮在所有东西之上......

Answer 1

使用absolute和relative定位没有任何问题，它们已经得到了很长时间的全面支持。在你的两种方法中，我肯定会选择绝对和相对位置，因为边距是有点hacky。

就我个人而言，我不会同时使用您的方法，而是将#small放在#big内，因为它在语义上更正确（因为#small在#big内）。< / p>

See on 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;
}

Answer 2

不建议那些不知道如何使用它的人，对于我们其他人来说，它的效果非常好。

我绝对不会使用负边距..像Tyriar said它很hacky而且也不容易阅读。

对于ie6错误，你有很多错误的ie，解决它们的方法是通过使用失败的安全代码来补充你的声音html / css，而不是为了那个原因将你的声音html降级为hacky html。

Answer 3

使用保证金更好！如果你使用

position:relative
position:absolute

您需要了解与外界相关的

CSS使用位置相对+绝对或负边距

3 个答案: