overlap divs with relative positioning?_问答_开发者

开发者 https://www.devze.com 2023-02-02 10:12 出处：网络

Is it possible to overlap divs with CSS without using absolute coordinates -- that is, with relative positioning?

相关专题：css overlap

Is it possible to overlap divs with CSS without using absolute coordinates -- that is, with relative positioning?

I have a background image I split into 3 vertical pieces,

1st one is left-aligned,
2nd one repeats across the middle,
3rd one is right-aligned

Then I want to have my main site content on top of that, centered. I'm not sure how to do this without using absolute positioning.

      Kinda like this

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

      Different symbols = differnt background image or pattern

I was thinking about having the backgrounds just as three divs, and then have the body div positioned absolutely, but I want it to be centered for widescreen displays. Any ideas?

For example, the expected behavior under resizing:

|$$$$$|**********************|&&&开发者_C百科amp;&&|
|$$$$$|**********************|&&&&&|
|$$$|--------------------------|&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|  shakeyour<body></body>  |&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|--------------------------|&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

---  

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

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

<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>

You need something like this. Of course, move styles in CSS file, and add your backgrounds.