将中心 div 重叠在两个背景 div 上？

【问题标题】：Overlapping a center div over two background divs?`将中心 div 重叠在两个背景 div 上？
【发布时间】：2012-01-21 14:51:50
【问题描述】：

嘿，伙计们，可能是一个 n00b 问题，但我想让两个不同颜色的 div 垂直对齐背景，它们的宽度为 100%，高度为任意值，为简单起见，我们会说 300px。然后我想将一个与其他两个 div 重叠的 div 居中。有什么建议吗？干杯

【问题讨论】：

我想要两个 div 的页面宽度 (100%)，它们都将在彼此之上。然后我想要一个 div 居中于其他两个 div 之上。哈哈，很抱歉造成混乱
两个 div 怎么能在彼此之上？为什么第三个 div 会与两者重叠？第一个会被第二个隐藏，第三个都会隐藏。
好的，我明白了，让我改一下。我想要两个 div 作为背景 - 两个都是可见的，然后另一个 div 居中重叠/在背景 div 上。
如果它们都是页面的宽度，那么只会显示一个。
我该怎么做呢？我不想使用背景图片。嗯

标签： html center alignment

【解决方案1】：

这样的？您没有提供任何规范，因此很难判断哪些属性可以硬编码，哪些不能。但这应该可以帮助您入门。

http://jsfiddle.net/PWwQM/1/

#overlay { 
    border: 1px solid black;
    background: yellow;
    width: 400px; 
    left: 50%;
    top: 75px;
    margin-left: -200px; 
    height: 300px; 
    position: absolute;
}

【讨论】：

嘿，它非常有效，但是“margin-left: -200px; 让我难过，为什么需要这样做？
@ImmortalKING 您设置 left: 50% 以将 div 置于页面中间。但是你需要用它的宽度来抵消一个负数。叠加层的宽度是400，所以必须设置负边距400/2
干杯人！我明年要上大学，我想从事网络开发，但我不知道是做软件工程还是计算机科学？抱歉问题哈哈
@ImmortalKING 您应该接受 mrtsherman 的回答。这就是 SO 上的“提问者”如何表达他对正确解决方案的赞赏。