内联顶部/底部属性样式不覆盖外部样式表答案

【问题标题】：Inline Top/Bottom Property Style Not Overriding External Stylesheet内联顶部/底部属性样式不覆盖外部样式表
【发布时间】：2019-01-23 21:42:46
【问题描述】：

当尝试使用内联样式更改“底部”CSS 属性时，外部样式表上的“顶部”属性优先。

怎么会？

div {
  position: relative;
  top: 10px;
}

body {
  font-family:arial;
  font-size: 20px;
}

<div style="position:relative; bottom:-100px">
test
</div>

【问题讨论】：

标签： html css

【解决方案1】：

虽然内联样式确实比外部样式更具体，但这里的区别在于top 和bottom 是不同属性。如果它们是相同的属性，CSS specificity 将发挥作用，并且内联样式将覆盖外部样式。

但是，由于top 和bottom 是不同的属性，浏览器希望同时应用它们。考虑到它们对布局有直接相反的影响，只能应用两者中的一个。 top 优先，bottom 被忽略。

这是真的不管bottom 属性是否比top 属性更具特异性！

the top MDN 对此进行了澄清：

当top 和bottom 都指定时，和 height 未指定或auto 或100%，top 和bottom 距离都受到尊重.在所有其他情况下，如果 height 以任何方式受到约束，则 top 属性优先，bottom 属性将被忽略。

您的场景属于上述“所有其他情况”。

【讨论】：

【解决方案2】：

将 top:auto !important; 添加到您的内联将解决此问题。

<div style="position:relative; bottom:-100px;top:auto !important;">
test
</div>

【讨论】：