我的应用程序有多个页面，每个页面都有一个顶级类 .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>最佳答案
短:使用 relative当你需要定位内部 absolute对应于 relative 的子元素元素。
设置position:relative; (instead of the default static )有特定的用途，但是，是的，基本上这样做没有错。
但是在将位置设置为 relative 之后你应该知道，即:absolute定位的 child 元素将相对于该父元素，而不是第一个外部定位的祖父元素。
设置position (通常)在做时也是明智的 overflow .
在此jsBin example删除 CSS position: relative;评论并查看差异。
在您的特定情况下，您的 position:relative; <main>是 body 的直系子代，充当容器，position:relative;可能是一个明智的选择，尽管不是必需的。
关于css - 是全局定义位置:relative to page container a good practice?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38863750/