HTML/CSS 初学者 - 嵌套 <div> s <div> 然后应用定位

Question

我正试图在页面中心显示一个基本的4块布局。我目前的工作是在父div（class＝wrapper）上使用以下内容

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

然而，尽管这会使所有子div居中，但它不允许我根据我想要的布局来定位子div，即左块：36px，上块：120px。

有什么想法吗？我可以绝对地定位子div，但要相对于.wapperdiv的中心定位？

谢谢。

Matt

Answer 1

要相对于父div（.wapper）定位子div，可以执行类似的操作：

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

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

请参阅JSFiddle上的示例。

此外，为了快速入门，请学习十步CSS定位

Answer 2

如果您想精确定位子div（即左：36px；上：120px；）：

添加position:relative到包装器div，添加position:absolute到子div。

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