全局定义的位置：相对于页面容器是一个好的实践吗？

2023-11-29

我的应用程序有多个页面，每个页面都有一个顶级.page-container。对于页面容器的相对定位设置存在争议。我的理解是所有内容都是相对于页面容器的。有什么想法吗？

示例如下：

.page-container {
  position: relative;
  background-color: #f3f3f3;
  padding: 10px;
}

.page-content {
  background-color: pink;
}

<body>
  <main class='page-container'>
    <div class='page-content'>content for each page </div>
  </main>
</body>

Short: Use relative当你需要定位内部时absolute相应的子元素relative元素。

Setting position:relative; （而不是默认的static)有特定的用途，但是，是的，这样做基本上没有什么错。
但是将位置设置为之后relative你应该知道，即：absolute定位child元素将相对于该父级，而不是相对于第一个外部定位的祖父母。

Setting position（一般来说）这样做也是明智的overflow.

In this jsBin 示例删除CSSposition: relative;评论并查看差异。

在您的具体情况下，您的position:relative; <main>是的直系子代body，充当容器，position:relative;尽管不需要，但可能是一个明智的选择。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css