Плавающие div поверх других div [дубликаты]

Question

Плавающие div поверх других div [дубликаты]

0

Я пытаюсь создать что-то вроде следующего

 ------------------------------------------
|                 div 1                    |
|         __________________________       |
|        | div2 on top of div1/div3|       |
---------|-------------------------|-------
|        |        div2             |       |
|        |_________________________|       |
|  div3  |                         | div3  |
|        |        div4             |       |
|        |                         |       |

Это то, что у меня есть до сих пор..

<body>
   <div id='div1'></div>
   <div id='container'>
       <div id='div2'></div>
       <div id='div4'></div>
   </div>
   <div id='div3'></div>   
</body>

css
body{
   width:980px;
   margin:0 auto;
   position:relative;
   background-color: #EEEEEE;  
}

#container{
   position:absolute;
   top:15px;
}

#div1{
  background-color: red;
  height: 200px;
  width: 1200px;
}

Проблема в том, что div1 должен расширять всю длину вместо 980px. Я также хочу, чтобы мои div2 и div4 находились в середине страницы. В моем css div1 будет только

 -------------------------
|         div 1           |
|_________________________|
| div2 on top of div1/div3|
|-------------------------|
|        div2             |
|_________________________|
|                         |
|        div4             |
|                         |

Может ли кто-нибудь мне помочь? Большое спасибо!

FlyingCat 02 дек. 2013, в 02:05

Источник

0

Смотрите ответ, который я дал на очень похожий вопрос здесь: stackoverflow.com/questions/20318869/…
Koen Peters 02 дек. 2013, в 00:56
2

@koenp Этот вопрос он задал ему: D
totymedli 02 дек. 2013, в 01:00

Теги:

html

css

1 ответ

Ещё вопросы

Смотрите ответ, который я дал на очень похожий вопрос здесь: stackoverflow.com/questions/20318869/…

totymedli · Accepted Answer · 2013-12-01T23-36-00.000Z

Демо-версия

Я добавил background-color и height только для видимости. Идея заключалась в том, что вы можете создавать свои div1 и div3 и вы просто устанавливаете контейнер шириной 100% немного ниже относительного div1. Затем просто добавьте div2 и div4 с меньшей относительной шириной, div4 80% в контейнер.

HTML

<div id='div1'></div>
<div id='container'>
    <div id='div2'></div>
    <div id='div4'></div>
</div>
<div id='div3'></div>

CSS

#container {
    position: absolute;
    top: 100px;
    width: 100%;
}
#div1 {
    background-color: red;
    height: 200px;
    position: relative;
}
#div2 {
    background-color: blue;
    height: 200px;
    width: 80%;
    margin: 0 auto;
}
#div3 {
    background-color: green;
    height: 400px;
}
#div4 {
    background-color: yellow;
    height: 200px;
    width: 80%;
    margin: 0 auto;
}

О вашем втором вопросе. К сожалению, вы не можете заставить div3 до div4 в чистом CSS, потому что контейнер вынимается из потока документов, когда вы даете ему абсолютную позицию, поэтому вы не можете создать относительное позиционирование в соответствии с ним. Однако вы можете сделать следующие взломы:

Расчет вручную

Вы должны вычислить высоты вручную. div4 высота 800px и имеет 100px сдвинуты так, div3 должен быть 900px высотой. Не забудьте добавить это тоже:

body{ margin: 0px; }

Фоновый взлом

Если div3 имеет цвет исправления, вы можете установить цвет своего body с нулевым запасом:

body{
    background-color: green;
    margin: 0px;
}

JavasScript

Вы можете просто получить и установить высоту <div> через JavaScript.

Спасибо. У меня есть еще один вопрос. Как увеличить мою высоту div3 до уровня div4. div4 может быть динамической высотой. Я обновил ваш фд. jsfiddle.net/CuN7A/1 +1 хотя
@FlyingCat Я не думаю, что вы можете сделать это с этой DOM. Но я отредактировал свой ответ с помощью нескольких обходных путей, которые вы можете попробовать.