2

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

我有两种方法：

使用绝对位置和相对位置

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

或者

使用负边距

margin:-125px 0 0 75px;

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

编辑：
div 是示例。
实际上，我在另一张图片上方获得了图片（youtube 预览图片，并在其上方播放按钮图片）。
图像在手风琴内，在 ie6 中关闭手风琴/打开它会导致绝对容器漂浮在所有东西之上......

4

3 回答 3

4

使用absolute和relative定位都没有问题，它们已经完全支持了很长时间。在您的两种方法中，我肯定会使用绝对和相对位置一种，因为边距一种有点笨拙。

就个人而言，我不会使用您的任何一种方法，而是将其放入#small内部#big，因为它在语义上更正确（因为#smallis within #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

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

position:relative
position:absolute

您需要了解与外部 div 的相关性

于 2013-03-09T09:38:33.590 回答
1

不建议不知道如何使用它的人使用位置，对于我们其他人来说，它工作得很好。

我绝对不会使用负边距。就像 Tyriar所说的那样，它很老套，而且不容易阅读。

至于 ie6 的 bug，你有很多 ie 的 bug，解决它们的方法是用故障安全代码补充你原本健全的 html/css，而不是为了 ie 而将你的健全的 html 退化为 hacky html。

于 2013-03-09T11:11:08.113 回答