使用位置relative+absolute或负边距的CSS

Question

我想在另一个div (200x200)的中央放一个小div (50x50)。

我有两种方法：

使用位置绝对和相对

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

或

使用负值边距

margin:-125px 0 0 75px;

我想知道哪条路更好，为什么.

我听到有人说这个职位是不推荐的。这是真的吗？为什么？

编辑：

迪夫人是异教徒。

实际上，我在另一张图片上看到了图像(youtube预览图像，并在上面播放按钮图像)。

图像在手风琴内部，在ie6中关闭手风琴/打开它会使绝对容器浮在所有的上方。

Answer 1

使用absolute和relative定位没有什么问题，它们已经被完全支持了很长一段时间。在你的两种方法中，我肯定会选择绝对和相对位置，一种是边距，一种是有点麻烦。

就我个人而言，我不会使用您的任何方法，而是将#small放在#big中，因为它在语义上更正确一些(因为#small在#big中)。

见jsFiddle

<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

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

position:relative
position:absolute

您需要了解与div相关的外部信息。

Answer 3

不推荐那些不知道如何使用它的人，对于我们其他人来说，这是非常好的工作。

我绝对不会用负值..。就像提亚说一样，它很烦人，而且也不容易读懂。

至于ie6错误，您有大量的ie错误，解决它们的方法是使用错误安全代码来恭维其他声音的html/css，而不是为了ie的缘故将您的声音html降级为hacky。