全局定义的位置：相对于页面容器是一个好习惯吗？答案

【问题标题】：Is globally defined position:relative to page container a good practice?全局定义的位置：相对于页面容器是一个好习惯吗？
【发布时间】：2016-08-10 03:29:15
【问题描述】：

我的应用程序有多个页面，每个页面都有一个顶级类.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>

【问题讨论】：

无论有没有，都可以，因为当您有一个处于绝对位置的元素并且您希望该元素位于该容器的顶部时，需要一个具有 position:relative 的容器只要。除此之外，只需一些 clearfix、display、float 和其他一些可用于制作布局的属性，即可轻松形成布局。

标签： css

【解决方案1】：

简短：当您需要将内部 absolute 子元素定位到该 relative 元素时，请使用 relative。

设置position:relative;(instead of the default static)有特定用途，但是是的，这样做基本上没有错。
但是在将位置设置为relative 之后，您应该知道，即：absolute 定位的 child 元素将相对于该父元素，而不是第一个位于外部的祖父元素。

设置position（通常）在设置overflow 时也是明智的。

在此jsBin example 中删除 CSS position: relative; cmets 并查看差异。

在您的position:relative; <main> 是body 的直接子代的特定情况下，position:relative; 可能是一个明智的选择，尽管不是必需的。

【讨论】：

【解决方案2】：

div 的默认position 是static（即position:static），因此通过将位置值分配给它作为相对值（即position:relative），因此您正在为其分配新位置，这有点相似但仅当您的子元素定位为绝对（即position:absolute）时才会有所不同。所以可以多次分配position:relative，而不是太多。但是当你的子元素定位为absolute时，一定要指定。

您可以访问这里，详细了解poistion:static 和poistion:relative、Here.... 之间的区别

第一个示例通过将position:static 分配给父级并将absolute 分配给child 和top:0，您可以看到子元素超出了父级div .

.page-container {
  position:static;
  background-color:#111;
  padding: 10px;
}

.page-content {
  background-color: pink;
  position:absolute;
  top:0;
}

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

第二个示例通过将position:relative 分配给父级并将absolute 分配给child 和相同的top:0，您可以看到子元素保留在父div 内部，将子元素带到最高位置为零。

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

.page-content {
  background-color: pink;
  position:absolute;
  top:0;
}

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

【讨论】：