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

概述上下文的设置 我想你可以通过Stack Overflow上的简历告诉我,我对css及其行为并不陌生.然而,我刚刚遇到过一些我之前没有经历过的看起来完全错误的东西 – 但是Firefox 27和Chrome 33以及IE 11都是一样的. 这是代码(只有两个空的嵌套div元素是html),其中can be seen in this fiddle example： CSS div { widt 上下文的设置

我想你可以通过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;}

我原以为绝对定位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,我发现的任何一个都可以用来设置宽度/高度,但我的问题的关键是我希望级联中更具体/最后一个优先,无论定义大小的方式.然而,这并没有发生在这里.

我所看到的行为的描述

@pjp发现this sitepoint reference,说明：

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％获胜,因为它是为该属性定义的“最后一个”.

解决方法 我认为你的困惑来自于以一种智能的方式处理特异性.

它以机械方式工作.

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

子属性将wIDth属性继承为50％,因为子级上没有设置宽度.忘记了从左右属性计算宽度的可能性,没有定义宽度属性,就是这样.

然后,你还有左右属性,都设置为0.(我认为这里没有讨论).

然后,in the w3c docs,你看

If the values are over-constrained,ignore the value for ‘left’ (in case the ‘direction’ property of the containing block is ‘rtl’) or ‘right’ (in case ‘direction’ is ‘ltr’) and solve for that value.

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

总结

以上是内存溢出为你收集整理的html – 更具体的css绝对定位元素,不覆盖先前设置的高度/宽度全部内容，希望文章能够帮你解决html – 更具体的css绝对定位元素,不覆盖先前设置的高度/宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。