html - 为什么位置的 div 默认值是静态的而不是相对的?

标签 html css css-position

<分区>

就像标题一样,为什么 div(或 p 或 html 中的任何其他元素)将“position: static”作为默认值?为什么不是“position:relative”? 我没有看到在我的 CSS 中使用“position: static”有任何好处。 使用“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上面的代码。 对不起我的土 bean 英语。 :D

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

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

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

所以,我不想/不需要“将绝对元素相对于 DOM 树中更靠上的元素定位,或者可能绝对定位在页面主体上。”,是否还有其他我需要知道的技术预防措施我让所有 div 都是相对的?

最佳答案

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

关于html - 为什么位置的 div 默认值是静态的而不是相对的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23653100/

相关文章:

html - 垂直居中,绝对定位,多元素

html - 使用 CSS 更智能地居中 div

html - 边距和绝对位置无法正常工作

javascript - 从不同行和列中的 Javascript 数组和 Bootstrap 生成动态卡片 HTML 卡片

php - 如何使用ajax从html获取数据并将数据传递到php

css 1、css 2、css 2.1 和 css 3,每个版本中哪些 css 属性和选择器不同/新增?

javascript - 我有一个使用 jquery 切换的 div,但我为此 div 定义的背景颜色仅在我单击时可见

javascript - 如何获取 href 的值并使其滚动到 anchor

css - 删除某些屏幕尺寸的元素

javascript - 使用 jquery 对多个表单进行通用电子邮件验证