绝对vs相对位置宽度和高度

我知道什么是绝对的&相对位置，但有些点仍然不会被清除。参考绝对vs相对位置宽度和高度

CSS：

.rel{ 
    position:relative; 
    background:red; 
} 
.abs{ 
    position:absolute; 
    background:blue; 
}

HTML：

<div class="rel">rel</div> 
<div class="abs">abs</div>

现在点是：

相对格需要100％的宽度自动但绝对格只需要内容宽度。为什么？
当我给高度100％时，相对div没有效果，但绝对div需要100％高度。为什么？
当我给margin-top：30px它是绝对div的转移，但是当我给顶部：30px然后只有相对的div转移。为什么？
当我不给top:0 , left:0绝对div它需要高于div高度。为什么？

来源

2011-03-16 sandeep

@BoltClock：任何引用？ – fabrik 2011-03-16 09:30:13

@BoltClock：请给我链接规范 – sandeep 2011-03-16 10:05:31

这里是一个很好的参考资料来解释职位类型的差异：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they -differ/ – Dan 2011-03-16 10:10:36

设置position:absolute去除文档结构的正常流动有问题的元件。所以除非你明确设定宽度，否则不知道宽度有多大。如果这是您所追求的效果，您可以明确设置width:100%。
总体上与position:relative相似的元素的行为方式与正常的position:static元素相同。因此，除非父元素具有定义的高度，否则设置height:100%将不起作用。相比之下，绝对定位元素从文档流中移除，因此可以自由调整其包含的元素当前拥有的任何高度。
这可能与您HTML中的父元素有关，但除非您提供完整的HTML和CSS页面，否则我无法进一步提供帮助。
top和left属性的默认值是auto。这意味着浏览器会为您计算这些设置，并将它们设置为元素在没有position:absolute时将呈现的位置。

来源

2011-03-16 11:33:17 warmanp

感谢您的答案。我喜欢第1和第4点，它非常有用，但对于第3点请实现上述代码中的值以便更好地理解 – sandeep 2011-03-16 11:49:11

@sandeep，上面的代码不包含任何有关这两个div的父元素。我需要知道父母是如何为了完全回答你的问题而设计的。 – warmanp 2011-03-17 11:14:17

但是，是不是'位置：绝对'仍然相对于它的父元素？ [w3schools.com]（http://www.w3schools.com/cssref/pr_class_position.asp）说：“该元素相对于其第一个定位的（非静态的）祖先元素进行定位”。这实际上意味着什么？什么是祖先元素，它必须被绝对定位？你如何找到元素祖先元素？ – 2015-07-02 05:34:04

绝对vs相对位置宽度和高度

回答

相关问题