与相对定位重叠div？答案

【问题标题】：overlap divs with relative positioning?与相对定位重叠div？
【发布时间】：2011-06-01 22:09:05
【问题描述】：

是否可以在不使用绝对坐标（即使用相对定位）的情况下使用 CSS 重叠 div？

我有一个背景图像，我将其分成 3 个垂直部分，

第一个是左对齐的，
第二个在中间重复，
第三个是右对齐

然后我想让我的主要网站内容居中。如果不使用绝对定位，我不确定如何做到这一点。

      Kinda like this

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|shakeyour<body></body>|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

      Different symbols = differnt background image or pattern

我正在考虑将背景设置为三个 div，然后将 body div 绝对定位，但我希望它位于宽屏显示的中心。有什么想法吗？

For example, the expected behavior under resizing:

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$|--------------------------|&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|  shakeyour<body></body>  |&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|--------------------------|&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

---  

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$|------------------------------|&|
|$|                              |&|
|$|                              |&|
|$|   shakeyour<body></body>     |&|
|$|                              |&|
|$|                              |&|
|$|------------------------------|&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

【问题讨论】：

我只需要在优秀的 ascii 艺术上补充你。

标签： css html overlap

【解决方案1】：

body {
   padding: 50px 20px;
   box-sizing: border-box;
}

【讨论】：

【解决方案2】：

<div style="float: left; width: 20%;">Left</div>
<div style="float: left; width: 60%; margin: 0 20%;">Center</div>
<div style="float: right; width: 20%;">Right</div>

你需要这样的东西。当然，在 CSS 文件中移动样式，并添加您的背景。

【讨论】：

如果你不想要它 100% 的屏幕，请在我上面的答案中的所有三个
周围放置一个
，并放置你想要的任何大小 + style= “边距：自动；”
感谢您的快速回复！不用担心黑莓手机的拼写错误，一切都很好。查看我所做的更改，以便您可以看到我在调整大小时所期望的行为
让主体居中，跨浏览器有点棘手。我回家后会chk