Question

我想在代码中使用margin，但是我遇到了一些问题。请看：

<div id="outer">
<div id="inner1">
    Margin not coming from top (not absolute)
</div>

<div id="inner2">
    Div has absolue prop
</div>

CSS代码是：

#outer {
    margin: 100px;
    background-color: green;
    height: 300px;
    widht: 400px;
}

#inner1 {
    margin: 10px;
    background-color: red;
}

#inner2 {
    position: absolute;
    margin: 20px;
    background-color: blue;
}

我无法理解为什么将位置设置为绝对值限制#inner2 div的宽度。
由于#inner1 div没有绝对属性，因此它没有从顶部开始。我无法理解这一点。请解释一下。

输出结果为：jsFiddle

Answer 1

设置 position:absolute从文档结构的正常流中删除有问题的元素。因此，除非您明确设置宽度，否则它将无法知道宽度。你可以明确地设置宽度，如果那是你想要的效果..

看到这个

absolute vs relative position width & height

Answer 2

问题1：我无法理解为什么将位置设置为绝对是限制inner2 div的宽度。

将位置设置为inner2 div的绝对值，只要文本获取宽度auto即可。设置位置为inner2 div的相对位置，得到外部div的宽度。

因此，如果您想要绝对定位，还要设置inner2 div的宽度。

问题2：由于inner1 div没有绝对属性，因此它没有来自顶部的边距。我无法理解这一点。请解释一下。

从文档流程中，你的内部div永远不知道它在其他div（外部）内部，将border或position设置为外部div的绝对值。

小提琴http://jsfiddle.net/C7dE2/20/

Answer 3

你应该使用绿色div padding-top属性 - #inner1并设置高值margin-top只会将整个#outer向下推进！

CSS保证金和绝对财产

3 个答案: