Как мога да накарам горния див да застане зад долния?

[dj_ee3]

Предварително се извинявам знам че въпроса ми е леко тъпичък просто не се сещам как да походя в тази ситуация.
Имаме 2 дива

<div id="1">edno</div> 
<div id="2">dve</div>

Като div 1 е син да речем а div 2 е червен. Kато искаме да ги доближим 2-та така че да има част в която цветовете са един върху друг. Понеже div 1 сме го написали преди 2 когато синия цвят в този случай ще застане над червения. Въпроса ми е как да го направя обратното? Как червения цвят или цвета на div 2 да застане над този на div 1 когато се смесят.

Аз имам една идея и тя е да напиша първо див2 и после див1 в кода т.е нещо такова

<div id="2">dve</div>
<div id="1">edno</div>

и после да си играя с позиционирането и да позиционирам див1 над див2 но това едва ли е най-правилния подход в тази ситуация.

 

[iCreatives]

Сложи им z-index .
Ако не знаеш какво е това погледни в интернет.
Предполагам, че при позиционирането ще трябва да им сложиш display: inline;

 

[shterev]

Сложи им z-index .
Ако не знаеш какво е това погледни в интернет.
Предполагам, че при позиционирането ще трябва да им сложиш display: inline;

Къде си видял ,че се слага display:inline; :shock: дай линка да видя?

По темата: Двата дива не те знам как си ги направил, но ги правиш в един общ(може ида имаш такъв,но от това което си дал така ти го обяснявам). Този общия си има ширина и височина и му задаваш position:relative;
После на двата дива задаваш position:absolute; left: ..px; top..px; z-index:5;
Като точно тоя z-index е от значение кой див ще е от горе. Ако единие ти див има з-индекс 5 а другия 10 , естесвено този див със по-голяма стойност ще е отгоре

 

[rivo]

http://www.w3schools.com/Css/css_positioning.asp

 

[iCreatives]

Сложи им z-index .
Ако не знаеш какво е това погледни в интернет.
Предполагам, че при позиционирането ще трябва да им сложиш display: inline;

Къде си видял ,че се слага display:inline; :shock: дай линка да видя?

По темата: Двата дива не те знам как си ги направил, но ги правиш в един общ(може ида имаш такъв,но от това което си дал така ти го обяснявам). Този общия си има ширина и височина и му задаваш position:relative;
После на двата дива задаваш position:absolute; left: ..px; top..px; z-index:5;
Като точно тоя z-index е от значение кой див ще е от горе. Ако единие ти див има з-индекс 5 а другия 10 , естесвено този див със по-голяма стойност ще е отгоре

Да, така ще стане, но ще трябва да се позиционира с position:relative; , но аз релативното не го харесвам! Мисля, че е много по-добре с margin и тогава ще трябва да има display: inline , защото ако е блоков див няма да стане. Няма как да се поставят един върху друг.