Question

是否可以在不使用绝对坐标的情况下将div与CSS重叠 - 也就是说，使用相对定位？

我有一个背景图片，我分成3个垂直的部分，

第一个是左对齐的，
第二个在中间重复，
第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>     |&|
|$|                              |&|
|$|                              |&|
|$|------------------------------|&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

Answer 1

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

Answer 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文件中移动样式，然后添加背景。

重叠div与相对定位？

2 个答案: