html – 更具体的css绝对定位元素,不覆盖先前设置的高度/宽度
上下文的设置
我想你可以通过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,说明:
这恰好阐明了我所看到的行为.它没有解决为什么(正式)它是这样的.我本可以预料到: (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,你看
这是一个引用几乎所有问题的引用词,但来自一个授权来源 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |