更具体的 css 绝对定位元素不覆盖先前设置的高度/宽度

Question

上下文设置

我想你可以从我在 Stack Overflow 上的简历看出我对 css 及其行为并不陌生。但是，我刚刚遇到了一些我以前从未体验过的东西，这似乎完全不正确——但 Firefox 27、Chrome 33 和 IE 11 都呈现相同的内容。

这是代码（只有两个空的嵌套div元素是html），其中can be seen in this fiddle example：

CSS

div {
    width: 50%;
    height: 100px;
    margin: 10px;
    border: 1px solid red;
    position: relative;
}

div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-color: cyan;
}

我本来希望absolute 定位div 直接与relative 父div 的大小重叠。我预计它的定位属性会覆盖来自直接div 调用的width 和height 和margin 定位。我会预料到这种行为 (1) 因为它在选择器中更具体，并且 (2) 因为它是绝对定位的，并且对所有四个边都给出了定位调用。

正如您在the referenced fiddle above 看到的那样，它实际上保留了它的宽度和高度，并且似乎基本上“忽略”了它的定位值。也就是说，我得到了相同的定位if the positioning values are taken out。我需要像这样覆盖以前设置的属性...

width: auto;
height: auto;
margin: auto;

...to get the positioning to actually do something。鉴于所有主要浏览器的反应相同，这似乎是标准行为。我想我以前从未注意到它，因为通常我的包装 div 的大小是由一个类完成的，因此仅适用于该 div，而我对绝对子项的定位也是如此，我不费心设置宽度和高度。

问题本身

我的问题是从 W3C 文档（或备受推崇的来源，例如来自主要浏览器开发人员之一的来源）中寻求引用和链接) 讨论为什么或width或height设置应该覆盖@987654340的设置@、right、bottom、left等设置。 From the main page discussing absolute positioning，我发现两者都可以用于设置宽度/高度，但我的问题的症结在于 我希望级联中更具体/最后一个优先，无论哪个方式是定义尺寸。然而这并没有发生在这里。

我所看到的行为的描述

@pjp 找到了this sitepoint reference，声明：

绝对定位的盒子，左右都有一个值 除了 auto 将有效地定义元素的宽度 假设元素的宽度是自动的。这可能会导致 如果左右位置出现在 同一点或可能重叠。如果左、右和 宽度被过度约束并且方向属性是 ltr, right 将被忽略。如果方向是 rtl，left 将被忽略。注意 宽度为 auto 的替换元素将具有元素 替换了固有宽度并应用了前面的规则。

这正是我所看到的行为。它没有解决为什么（官方）是这样的。我本来期望的是：

(1) 更高的特异性或相同的特异性，但遵循width 和height 的级联顺序设置（无论是通过这些属性还是通过定位属性明确）优先。

(2) 在同时定义两者的情况下（这样做不合逻辑，但是...）：

div {
   position: absolute;
   width: 50%;
   left: 0;
   right: 0;
}

或

div {
   position: absolute;
   left: 0;
   right: 0;
   width: 50%;
}

最后一个定义的宽度将被取代，所以第一个定位将获胜，第二个宽度将获胜。这就像在同一个块中的两个定义，就像这样：

div {
   width: 50%;
   width: 75%;
}

这里，width: 75% 获胜，因为它是为属性定义的“最后一个”。

Answer 1

我认为您的困惑来自以智能方式处理特异性。

它以机械的方式工作。

也就是说，每个具有值的属性都以级联方式处理，而不考虑其他属性之间的相关性。

宽度属性被子级继承为 50%，因为子级上没有设置宽度。 忘记从左右属性计算宽度的可能性，没有定义宽度属性，就是这样。

然后，您还有 left 和 right 属性，都设置为 0。（我认为这里没有讨论）。

然后，in the w3c docs，你看

如果值被过度约束，忽略'left'（如果包含块的'direction'属性是'rtl'）或'right'（如果'direction'是'ltr'）的值并求解该值。

这是一个与您问题中引用的几乎完全相同的词的引用，但来自权威来源