0

请考虑以下 CSS。请注意，在这种情况下没有定义或生效的其他 CSS 规则：

* {
    position: absolute;
    color: red;
}

div {
    position: static;
    color: blue;
}

当我添加一个带有一点文本的 div 时，它是live here，div 中的文本不再遍历整个屏幕。就好像 div 的 width 属性设置为 10%。如果我从通配符中删除 position:absolute 声明，则 div 将恢复正常（文本一直穿过屏幕）。这让我很困惑，因为我已经用 position:static 声明定义了所有 div。我尝试了这个，有没有包含著名的“reset.css”样式表，我得到了相同的结果。

起初我认为也许通配符规则优先于 CSS 中的 div 规则。那很简单。但是，我将通配符规则的颜色属性设置为红色，将 div 规则的颜色属性设置为蓝色，文本显示为蓝色。所以答案不能简单地是通配符规则优先于 div 规则。

我认为可能相关的一件事：绝对定位的元素相对于它的第一个定位（非静态）祖先元素定位。在这种情况下，body 没有这样的祖先，因此这可能只是由于 body 设置为绝对定位但没有定位的祖先元素而导致的某种静默错误。

有谁知道这种奇怪行为的原因是什么？

4

2 回答 2

2

position: absolute适用于该人<div>的父母。
它使它们收缩包装以适应它们的内容 - <div>.

由于<div>的布局区域不再包含整个页面宽度，因此它不会拉伸。

您可以通过添加width: 100%和删除边距和填充来解决此问题。

于 2013-04-26T01:38:02.783 回答
1

制作html和/或body定位static：

演示与html { position: static; }
演示与body { position: static; }

或者，将您的选择器更改为body *：

body * {
    position: absolute;
    color: red;
}
div {
    position: static;
    color: blue;
}
于 2013-04-26T01:42:11.517 回答