HTML / CSS初学者 - 将<div>嵌套在<div>中，然后应用定位</div> </div>

Question

我正在尝试向页面中心显示基本的4块布局。我目前的努力是在父div（class = wrapper）

上使用以下内容

.wrapper
{
margin:0 auto;
width:960px;
}

然而，虽然这会使所有子div居中，但它不允许我根据我想要的布局定位子div，即剩下一个块：36px和top：120px。

我有什么想法可以绝对定位子div，但是关于.wrapper div的中心定位？

感谢。

马特

Answer 1

要将子div与父div（.wrapper）相关联，您可以执行以下操作：

.wrapper {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
#child-1 {
  position: absolute;
  top: 120px;
  left: 36px;
}

您需要将position: relative;添加到父div，以便在子块上使用position: absolute;时，它们将完全位于父div中。

请参阅JSFiddle上的示例。

另外，为了快速入门，Learn CSS Positioning in Ten Steps

Answer 2

如果你想精确定位子div（即左：36px; top：120px;）：

添加位置：相对于包装器div，位置：绝对值为子div。

子div将位于距包装器左手边缘36个像素处，距离顶部120个像素。包装器div将在页面上居中（水平）。