logo标签列表

全局定义position:relative对页面容器来说是一个好的实践吗？

css
4

我的应用程序有多个页面，每个页面都有一个顶部类.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和其他属性即可轻松形成布局。 - user3771102
2个回答
1
使用relative定位内部absolute子元素相对于该relative元素的位置。

将 position:relative; (而不是默认的static) 应用于编程中有特定的用途，但基本上这样做没有问题。
但是，在将位置设置为 relative 后，您应该知道，即： absolute 定位的子元素将相对于其父级而不是第一个外部定位的祖先元素。

一般情况下，进行 overflow 时，设置 position 也是明智的选择。

在此 jsBin示例 中，删除 CSS 的 position: relative; 注释并查看差异。

在您的具体情况中，您的 position:relative; <main> 是 body 的直接子元素，作为容器，position:relative; 可能是一个明智的选择，尽管不是必需的。

0
position:static），因此通过将其分配为相对位置（即position:relative）来为其分配新位置，这与它有点相似，但仅在您的子元素被定位为绝对时才不同（即position:absolute）。 因此，在您的子元素被定位为absolute时，可以多次或不必须分配position:relative。

您可以访问此处以了解更多有关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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接