Создайте плавающий div поверх div

Question

Создайте плавающий div поверх div

0

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

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

Я хочу создать div2 поверх div1 и div3.

Я действительно не знаю, как это сделать. Может кто-нибудь мне помочь? Благодарю.

FlyingCat 02 дек. 2013, в 01:47

Источник

Теги:

html

css

3 ответа

1

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

Просто перейдите к

<div id="2"></div>
<div id="1"></div>
<div id="3"></div>

или создать элемент Wrap для разделов 1 и 3

<div id="wrapper">
    <div id="1></div>
    <div id="2></div>
    <div id="3></div>
</div>

и css:

#wrapper {
position: relative;
}
#2 {
position: absolut;
bottom: 100%;
}

Maloke 01 дек. 2013, в 22:57

0

Здесь еще одно возможное решение, которое вы можете вложить div2 в div3, затем добавить к нему позицию и добавить к нему отрицательную вершину. Как это:

HTML

<div class="div1"></div>
<div class="div3">
    <div class="div2"></div>
</div>

CSS

.div2 {
    position: relative;
    top: -50px;
}

Здесь скрипка я добавил прозрачность (через свойство непрозрачности) в div2, чтобы вы могли сказать, что она была выше divs 1 и 3. http://jsfiddle.net/hN5gq/

Многие из этих ответов, казалось, использовали позиционирование css. Это правильный путь. Здесь хорошая статья о позиционировании ее полезной вещи для понимания вместе с плавающей, чтобы вы могли выполнять практически любой макет. http://alistapart.com/article/css-positioning-101/

John 01 дек. 2013, в 21:35

Ещё вопросы

koenpeters · Accepted Answer · 2013-12-01T22-40-00.000Z

Вам нужно использовать абсолютное позиционирование CSS. Пример:

<div id="container">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>

#container {
  position: relative;
}
#div2 {
  position: absolute;
}

Вот пример jsfiddle: http://jsfiddle.net/M7J3G/1