Question

这是HTML代码和CSS代码。

#header {
  height: 75px;
}
#right {
  height: 75px;
  width: 700px;
  float: right;
}
#top {
  height: 100px;
  background-color: green;
}
#bottom {
  height: 800px;
  background-color: silver;
}
#main {
  height: 850px;
  width: 950px;
  background-color: #F3ECEA;
  margin: auto;
  position: absolute;
  z-index: 1;
}
body {
  margin: 0;
  padding: 0px;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="design.css">

<body>
  <div id="main">
    <div id=header>
      
      <div id="left"></div>
      <div id="right"></div>
      
    </div>
  </div>
  
  <div></div>
  
  <div id="top"></div>
  <div id="bottom"></div>
  
</body>

</html>

我正在尝试将#main div放在网页的中心，而且它应该位于#top和#bottom div之上。我已经尝试了z-index但它没有用。在使用z-index时，我可以将#main div放在#top和#bottom div上，但margin:auto无效。使用position:absolute的顶部和底部属性时，我能够放置#main div，但调整窗口大小会使其不同。我希望#main div在#bottom和#top分区之上，甚至在调整页面大小后也在页面的中心。

Answer 1

z-index应该能够管理一个优先于另一个的div。当您更改屏幕分辨率（即最小化等）时，您的居中和其他方面发生变化的原因是因为您已使用px定义了所有css而非百分比。将您的保证金等改为百分比，它应该有效。

Answer 2

基本上，要将#main div放在top / bottom div之上，只需在其中添加z-index为1。

要使#main居中于绝对位置，您需要为Left和Right属性指定0值，并为margin添加auto。

See fiddle

Answer 3

您的代码因为您应用的浮动而崩溃，这就是为什么改变事物并不能给您带来理想的效果。用chrome打开您的开发工具（F12），您可以检查元素以查看它们的位置。

如果您要浮动，我建议将clearfix添加到您的父div。

老实说，如果你想要你的div，我有点困惑，你能张贴一张照片吗？

Answer 4

将#main放在#top和#bottom上只需使用z-index。 #main的z-index较高。较低的#top和#bottom值。

在页面使用中居中#main，

margin-top: calc(50vh - 425px);
margin-left: calc(50vw - 475px);

vh代表视口高度，vw代表视口宽度。当窗口大小改变时，calc（）函数将动态计算顶部和左边距值。

<强>参考：

有关CSS单位的更多信息，请访问CSS Units。
有关CSS calc函数的更多信息，请访问CSS calc() Function

将div放在另一个div上

4 个答案: