如何在CSS中覆盖position:absolute的样式？

Question

我页面顶部有一个菜单，之后是一个使用以下 a 类的 div 标签：

<div class="a">
   Hello!
</div>

a 是一个通用的类，在样式中有 position: absolute;。我想禁用这个绝对定位，因为 div 内容没有完全显示。所以我决定使用另一个类来覆盖位置设置。

<div class="a overridden-a">

在我的其他样式中，.overridden-a{ position: ???? !important }中的position:应该设置为什么？

更新：我不想编辑a类的样式，这在项目中很普遍和通用。

- Elnaz

---

你能否创建一个 jsfiddle 来展示你所创建的内容... - frnt

Answer 1

< p > position 的默认值是 static。

尽量避免使用 !important，因为它不是最佳实践。相反，要覆盖 CSS 规则，需要使用更高特异度的选择器。试试这个：

.a.overridden-a { 
    position: static;
}

position: relative; 也可以达到您所需的效果。

- Rory McCrossan

---

感谢您关于!important的提示。 - Elnaz

Answer 2

你设置的值取决于你想要如何显示它。有四个可能的值（包括绝对定位，你试图覆盖它）。

来自http://www.w3schools.com/css/css_positioning.asp： position: static; 具有 position: static; 的元素没有任何特殊定位方式；它总是根据页面的正常流定位。这是默认值。 position: relative; 具有 position: relative; 的元素相对于其正常位置定位。设置相对定位元素的 top、right、bottom 和 left 属性将导致它远离其正常位置。其他内容不会调整以适应元素留下的任何间隙。 position: fixed; 具有 position: fixed; 的元素相对于视口定位，这意味着即使页面滚动，它仍然保持在同一位置。使用 top、right、bottom 和 left 属性来定位元素。 position: absolute; 具有 position: absolute; 的元素相对于最近的已定位祖先定位（而不是相对于视口定位，像固定定位）。

- ADyson

---

啊，好老的W3Fools又错了。可能的值不止4个：https://developer.mozilla.org/en/docs/Web/CSS/position。请不要把W3Schools作为参考。他们经常是完全错误的。链接到他们只会传播错误信息。MDN是一个更好的资源。 - Rory McCrossan

@RoryMcCrossan 嗯。你链接中唯一与“position”属性相关的额外值是“sticky”，这被标记为实验性质。其他值都是全局的（即继承，初始和未设置），适用于几乎所有属性。因此，W3schools在这方面几乎是正确的，我认为他们解释所使用的语言比Mozilla更清晰。（不是说他们总是正确的，但在这种情况下，我认为已经足够好了）。 - ADyson

Answer 3

默认情况下，它是static，因此您可以将其设置为静态。

通过添加style="position:static"或在.a声明之后使用css进行设置。

.overriden-a{
   position:static;
}

- nicael

Answer 4

< p > position 的默认值为 position: static，因此这可能会起作用：

.overridden-a {
    position: static;
}

- Terry

Answer 5

.overridden-a { position: static; }

如果您在声明a类之后放置它，应该可以解决问题。如果您的CSS文件结构良好，则通常不会经常使用!important。另一方面，它用于覆盖文件中任何位置声明的CSS规则。换句话说，它突出了CSS规则的特定性。

- roraima

Answer 6

你可以随时使用带有!important的内联CSS。这将覆盖任何其他样式，因为优先级将是第一位。

<div class="a" style="position: static !important">
  Hello!
</div>

- Abdul Sadik Yalcin