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的大小直接重叠。我预计它的定位属性会覆盖直接width调用的height和margin以及div定位。我本来期望这种行为（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设置应覆盖 a设置top，right，bottom，left等设置。 From the main page discussing absolute positioning，我发现其中任何一个都可以用来设置宽度/高度，但问题的关键是 我希望级联中更具体/最后的优先级更高关于定义尺寸的方式 。然而，这并没有发生在这里。

我看到的行为描述

@pjp找到this sitepoint reference，说明：

绝对定位的盒子，右边和左边都有一个值除了auto之外，还会有效地定义元素的宽度假设元素的宽度是自动的。这可能会导致如果左右位置出现在，则根本没有宽度的元素同一点或可能重叠。如果左，右和的值 width超限，direction属性为ltr，right 将被忽略。如果direction是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

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

它适用于机械方式。

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

子属性将width属性继承为50％，因为子节点上没有设置宽度。忘记关于从左右属性计算宽度的可能性，没有定义宽度属性，就是这样。

然后，你还有左右属性，都设置为0.（我认为这里没有讨论）。

然后，in the w3c docs，你看

如果值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'）并解决这个价值。

这是一个引用几乎所有问题的引用词，但来自一个授权来源

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

上下文设置

问题本身

我看到的行为描述

1 个答案: