перекрывать div с относительным позиционированием? - PullRequest
Новая
       2

перекрывать div с относительным позиционированием?

5 голосов
/ 31 декабря 2010

Можно ли перекрывать div с помощью CSS без использования абсолютных координат - то есть с относительным позиционированием?

У меня есть фоновое изображение, которое я разделил на 3 вертикальные части,

  • 1-й выравнивается по левому краю,
  • 2-й повторяется по центру,
  • 3-й выравнивается по правому краю

Тогда я хочу, чтобы мой основной сайтсодержание поверх этого, по центру.Я не уверен, как это сделать, не используя абсолютное позиционирование. 

      Kinda like this

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

      Different symbols = differnt background image or pattern

Я думал о том, чтобы фоны были такими же, как у трех div, и затем, чтобы div тела располагался абсолютно, но я хочу, чтобы это былов центре для широкоэкранных дисплеев.Есть идеи? 

For example, the expected behavior under resizing:

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

---  

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

Ответы [ 2 ]

2 голосов
/ 19 ноября 2012 
body {
   padding: 50px 20px;
   box-sizing: border-box;
}
0 голосов
/ 31 декабря 2010 
<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-файле и добавляйте фон.

...