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

时间:2013-03-09 09:26:52

标签: css position css-position margin

我想在另一个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是exmaples。
实际上我将图像放在另一个图像上方(youtube预览图像,并在其上方播放按钮图像) 图像在手风琴里面,在ie6关闭手风琴/打开它会导致绝对容器漂浮在所有东西之上......

3 个答案:

答案 0 :(得分:2)

使用absoluterelative定位没有任何问题,它们已经得到了很长时间的全面支持。在你的两种方法中,我肯定会选择绝对和相对位置,因为边距是有点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;
}

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

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

position:relative
position:absolute

您需要了解与外界相关的