CSS 绝对定位答案

【问题标题】：CSS Absolute PositioningCSS 绝对定位
【发布时间】：2011-05-10 02:12:55
【问题描述】：

理论题：

一个绝对定位的元素应该在它的定位父元素中从哪里开始？在它的边界边缘，还是它的填充偏移？ Safari 在绝对定位孩子时似乎会忽略父级的填充，但 Firefox 和 IE 似乎会考虑填充并从该偏移量开始。

谢谢

【问题讨论】：

这个link 应该可以帮助您了解定位及其工作原理。

标签： css

【解决方案1】：

自动偏移的东西会考虑填充。如果您有非自动偏移量，那么这些偏移量是从填充和边框之间的边界开始测量的。

【讨论】：

愚蠢的问题，什么是“自动偏移”？即什么css属性设置了“偏移量”？

【解决方案2】：

以下内容在所有浏览器中似乎都相同。在 IE9 中。 FF4.01、GG11、AF5 和 Opera 11。在没有 top、bottom、right 或 left 属性的情况下，绝对定位的子元素在应用填充后开始。即，子元素的顶部从填充的底部开始，子元素的左侧在左侧填充之后开始。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div class="outer">

<div class="inner">
</div>

</div>

</body>
</html>

CSS

div.outer
    {
    width: 800px;
    height: 500px;
    outline: 1px solid red;
    position: relative;
    background-color: #38EAFF;
    margin: 50px;
    padding: 25px;
    }


div.inner
    {
    width: 400px;
    height: 250px;
    outline: 1px solid green;
    position: absolute;
    background-color: green;
    }

我没有看到 Safari 在这里忽略了父母的 apdding？

【讨论】：

确实，这个测试用例的行为与预期一致。我必须有一些其他的影响因素，我错过了创造我的恐惧。如果我想不出来，我会重新检查并重新发布。感谢您抽出宝贵时间。