css - 为什么不将默认位置设置为相对位置?

标签 css layout css-position

我最近意识到 position: static 是多么无用,除非 relative 也可以,否则它不会为您提供任何东西。
事实上,我的问题是“为什么不将这一行添加到我们的 CSS 文件中?”

* { position:relative; }

所以我们总是能够轻松地将任何元素 absolute 放置在它的父元素中,或者通过 left: ... 或相同的方式移动元素 It self任何方向。
那么为什么默认情况下元素没有定位到relative

谢谢

最佳答案

让我们将一些处于默认静态状态的元素设为 position: relative;。仅通过单独更改该值,什么也不会发生。它出现在与更改前完全相同的位置。但它确实改变了两件事:

  1. 它的原始位置仍将被该元素占据(就像原始元素的幽灵仍然在那里占据空间一样)。
  2. 如果该元素具有绝对定位的子元素,则它们现在绝对定位在此元素的上下文中。

优势

如果所有元素都以相对定位开始,那么您自然会拥有上面的所有两项。您的 top/right/bottom/left 值的工作方式与您假设的一样。 Z-index 也“正常工作”。定位上下文始终受限于下一个父元素,这是合乎逻辑的。

缺点

最值得注意的是,始终将定位上下文限制在父元素是有限制的。假设您想将一个元素定位在页面的右上角,而不管该元素出现在标记中的什么位置。如果元素被隐藏在层次结构中,那将很难做到。您需要为每个父元素重置该定位上下文。这意味着将它们设置回 position: static;,并在此过程中失去相对定位的所有好处。

关于css - 为什么不将默认位置设置为相对位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38110802/

相关文章:

javascript - React.js 切换显示

css - 应用于背景图像的背景颜色色调效果

html - 背景滤镜超出边界半径

android - 约束布局 TextView 不显示

ios - 当键盘出现时,如何阻止 tableView 外部的标题消失

css - 位置 :fixed when left/top/right/bottom aren't specified - desired results in FF/IE, 但不在 Safari 中

html - Bootstrap 导航栏按钮未显示

html - 在 CSS 布局、内联 block 方面遇到问题

css - 在外部 DIV 上隐藏固定位置 DIV 的 Overflow-x

html - 我如何垂直居中图像和彼此相邻的 2 行文本?