上下文的设置
我想你可以通过Stack Overflow上的简历告诉我,我对css及其行为并不陌生.然而,我刚刚遇到过一些我之前没有经历过的看起来完全错误的东西 – 但是Firefox 27和Chrome 33以及IE 11都是一样的.
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;
}
我原以为绝对定位div直接重叠相对父div的大小.我预计它的定位属性会覆盖直线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文档(或一个备受推崇的来源,例如来自主要浏览器开发者之一)寻求引用和链接,讨论为什么或宽度或高度设置应覆盖顶部设置,右,下,左等设置. From the main page discussing absolute positioning,我发现的任何一个都可以用来设置宽度/高度,但我的问题的关键是我希望级联中更具体/最后一个优先,无论定义大小的方式.然而,这并没有发生在这里.
我所看到的行为的描述
Absolutely positioned boxes with both right and left having a value
other than auto will effectively define the width of the element
assuming that the element’s width is auto. This may result in the
element having no width at all if left and right positions occur at
the same point or perhaps overlap. If the values for left,right and
width are over-constrained and the direction property is ltr, right
will be ignored. If direction is rtl, left will be ignored. Note that
replaced elements with a width of auto will have the elements
intrinsic width substituted and the preceding rules applied.
这恰好阐明了我所看到的行为.它没有解决为什么(正式)它是这样的.我本可以预料到:
(1)具有更高的特异性或相同的特异性,但在宽度和高度的级联顺序设置(无论是由这些属性明确地还是由定位特性确定)中优先.
(2)在同时定义两者的情况下(这是不合逻辑的事情,但……):
div {
position: absolute;
width: 50%;
left: 0;
right: 0;
}
要么
div {
position: absolute;
left: 0;
right: 0;
width: 50%;
}
宽度的最后定义将取代,因此第一个定位将获胜,第二个宽度将获胜.这就像在同一个块中的两个定义一样,如下所示:
div {
width: 50%;
width: 75%;
}
宽度:75%获胜,因为它是为该属性定义的“最后一个”.