overlap divs with relative positioning?
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.
加载中,请稍侯......
精彩评论