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

Posted 2023-03-06

【中文标题】CSS使用位置相对+绝对或负边距

【英文标题】：CSS Using position relative+absolute or negative margin

【发布时间】：2013-02-24 21:25:09

【问题描述】：

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

我有两种方法：

Using position absolute and relative

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

或

Using negaive margin

margin:-125px 0 0 75px;

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

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

【问题讨论】：

position 完全没有问题。它当然有“副作用”，但如果你意识到它们，你应该在适当的地方使用它们。投票以“不具建设性”的方式结束该问题。

vertical and horizontal align (middle and center) with css.

@Vucko div 是示例。实际上，我的 img 高于另一个 img .. 可以在您的链接中使用该解决方案。

必须支持IE6吗？它目前的使用率为 0.6%，而且还在下降。在整个应用程序中支持它的成本远远超过它的价值。 w3counter.com/trends

【参考方案1】：

使用边距更好！ 如果你使用

position:relative
position:absolute

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

【参考方案2】：

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

我个人不会使用你的任何一种方法，而是将#small 放在#big 中，因为它在语义上更正确（因为#small 在#big 中）。

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;

【讨论】：

div 只是示例。实际上，我的 img 高于另一个 img。无论如何都不能使用你的构建..

那肯定用绝对定位。

【参考方案3】：

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

我绝对不会使用负边距.. 像 Tyriar said 它很老套，也不容易阅读。

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