为什么位置的div默认值是静态的而不是相对的？ [复制]

Question

就像标题一样，为什么 div（或 p 或 html 中的任何其他元素）具有 'position: static' 作为默认值？为什么不是“位置：相对”？ 我没有看到在我的 CSS 中使用“位置：静态”有任何好处。 使用 'position: relative' 在 html 中定义所有 div 元素是否安全？

编辑： 我很清楚静态、相对、绝对和固定定位之间的区别。但主要问题是为什么 div 或任何其他 html 元素的默认定位是静态的？这个例子：

HTML

<div class="div1">
    <div class="div2">
        <div class="div3">
            <div class="div-last"></div>
        </div>
    </div>
</div>

CSS

.div1 {
    width: 700px;
    height: 700px;
    background-color: #000;
    position: relative;
}
.div2 {
    width: 600px;
    height: 600px;
    background-color: #333;
    position: relative;
    top: 20px;
    left: 20px;
}
.div3 {
    width: 500px;
    height: 500px;
    background-color: #777;
    position: absolute;
    right: 0;
    top: 30px;
}
.div-last {
    width: 400px;
    height: 400px;
    background-color: #AAA;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

表明我不需要一个静态定位来按我的意愿排列我的 div。 这是上面代码的jsfiddle。 对不起我的土豆英语。 :D

编辑#2： 相关问题的答案是： “是的，是的。如果你尝试将一个元素绝对定位，它会相对于最近的祖先定位，它的 CSS 位置不是静态的。

如果每个元素都有 position:relative，这将是直接父元素。

但您可能希望将绝对元素相对于 DOM 树中更靠前的元素定位，或者绝对定位在页面主体上。”

所以，我不想/不需要“将绝对元素相对于 DOM 树中更靠前的元素定位，或者绝对在页面主体上。”，我之前是否需要了解其他技术预防措施我让所有的 div 都是相对的？

Answer 1

如果 position: relative 是默认值，position: absolute; 将不再按预期工作。也就是说，因为position: absolute 使用层次结构中最近的非静态定位元素作为引用。如果没有静态定位元素，则所有元素都是非静态的，因此position: absolute 将使用父元素作为引用，因此不再定位绝对，而是相对于父元素。