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

Question

上下文的设置

我想你可以通过Stack Overflow上的简历告诉我,我对css及其行为并不陌生.然而,我刚刚遇到过一些我之前没有经历过的看起来完全错误的东西 - 但是Firefox 27和Chrome 33以及IE 11都是一样的.

这是代码(只有两个空的嵌套div元素是html),可以在这个小提琴示例中看到:

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)因为它被定位为绝对并且给定所有四个边的定位调用.

正如你在上面提到的小提琴所看到的那样,它实际上保留了它的宽度和高度,并且似乎基本上"忽略"它们的定位值.也就是说,如果取出定位值,我会获得相同的定位.我需要覆盖以前设置的属性,如此...

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

...... 让定位真正做点什么.鉴于所有主要浏览器都在做同样的反应,这似乎是标准行为.我想我之前从未注意过它,因为通常我的包装div的大小是由一个类完成的,因此只适用于那个div,而我的绝对孩子的定位同样完成,我也懒得设置一个宽度和高度.

问题本身

我的问题是由W3C寻求报价(S)和链接(S)文件(或德高望重的来源,如从各大浏览器的开发者之一),讨论为何或者是在width或height设置应重写的设置top,right,bottom,left等设置.从讨论绝对定位的主页,我发现的任何一个都可以用来设置宽度/高度,但我的问题的关键是我希望级联中更具体/最后一个优先,无论哪个方向是定义尺寸.然而,这并没有发生在这里.

我所看到的行为的描述

@pjp找到了这个sitepoint引用,说明:

假设元素的宽度是自动的,具有除auto之外的值的具有左右值的绝对定位的框将有效地定义元素的宽度.如果左右位置出现在同一点或者可能重叠,则这可能导致元件根本没有宽度.如果left,right和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

我认为你的困惑来自于以聪明的方式处理特殊性。

它以机械方式工作。

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

宽度属性由子级继承为 50%，因为子级上没有设置宽度。忘记从 left 和 right 属性计算宽度的可能性，没有定义 width 属性，仅此而已。

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

然后，在 w3c 文档中，您会看到

如果值过度约束，则忽略“left”（如果包含块的“direction”属性为“rtl”）或“right”（如果“direction”为“ltr”）的值并求解那个值。

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