Question

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

Answer 1

简短： 当您需要定位与relative元素相对应的内部absolute子元素时，请使用relative。

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

设置position（一般情况下）在执行overflow时也是明智之举。

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

在特定情况下，position:relative; <main>是body的直接孩子，作为容器，position:relative;可能是明智的选择，尽管不需要。

Answer 2

div的默认position是static（即position:static），所以通过为它指定一个位置值作为相对值（即position:relative），这样你就可以分配新的位置，它有点相似，但只有当你的子元素定位为绝对时才会有所不同（即position:absolute）。所以可以多次分配position:relative而不是分配absolute。但是当你的子元素定位为poistion:static时，一定要分配。

您可以访问此帖，详细说明poistion:relative和position:static之间的差异，Here....

第一个例子，通过将absolute分配给父代，将child分配给top:0和.page-container { position:static; background-color:#111; padding: 10px; } .page-content { background-color: pink; position:absolute; top:0; }，您可以看到子元素去了在父div之外。

＆＃13;

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

＆＃13;

position:relative

＆＃13;

第二个例子通过将absolute分配给父child top:0和.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>，您可以看到子元素保留在父div内部将子项置于零位置。

＆＃13;

// Variable Declaration for String
$str = "1,2,,4,5,6";

// Create Array Out of the String, The comma ',' is the delimiter
// This would output 
//       [ 1 => 1, 2 => 2, 3 => '', 4 => 4, 5 => 5, 6 => 6 ]
$explodedStr = explode(',', $str);

// Filter Array And Remove The empty element which in this case
//    3 => ''
$filteredArray = array_filter( $explodedStr );

// Convert Array into String with comma delimiter 
$formattedString = implode(',',  $filteredArray);

＆＃13;

 SELECT count(UserRegistered),eventName
 From events,eventype
 WHERE events.eventCat=eventtype.eventID
 GROUP BY eventCat

＆＃13;

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

2 个答案: