Div na divie bez zagnieżdżania diva w divie - Problem z z-index Opcje

[malkavi]

Witam, męczę się już 2 dni z właściwością css "z-index", niestety nie wiem co robię źle..

To co chcę osiągnąć to wyciągnięcie czerwonego boxa wraz z treścią na tło z obrazkiem (domyślnie czarne)

Wiem że można to rozwiązać poprzez zagnieżdżenie diva w divie, lecz niestety mój cms generuje kod w takiej postaci czyli div tła obok diva boxu.

W tej chwili czerwony box znajduje się pod tłem.

KLIKNIJ ABY ZOBACZYĆ KOD

Bardzo proszę o pomoc.

Ten post edytował malkavi 14.12.2013, 10:35:24

[Damonsson]

na przykład:

[CSS] pobierz, plaintext 
top: -600px;
[CSS] pobierz, plaintext 

dla .box

[malkavi]

Zrobiłem tak i box faktycznie podniósł się ale niestety w miejscu gdzie był wcześniej został po nim wielki biały obszar w który nie da się nic normalnie wstawić. Jak to zrobić inaczej ?

[Damonsson]

to dla .box

[CSS] pobierz, plaintext 
top: 0px;
position: absolute;
[CSS] pobierz, plaintext 

Ewentualnie tak jak było i dla elementu który ma być tam w tym miejscu

[CSS] pobierz, plaintext 
margin-top: -600px;
[CSS] pobierz, plaintext 

[malkavi]

Kod

position: absolute;

Odpada, ponieważ wtedy tracę wszystkie właściwości centrowania i dostosowywania się do szerokości przeglądarki, divu .box
------------

Kod

margin-top: -600px;

to znów działa w taki sposób że przenosi ten duży biały obszar po boxie na sam dół strony pod stopkę i nadal się go nie pozbywam.

------------------

Da się to jakoś zrobić posiłkując się właściwościami "z-index" ?

[Damonsson]

z-index nie ma z tym nic wspólnego. Jeśli chcesz umieścić jakiś element w innym, a nie jest jego potomkiem, to musisz użyć position: absolute/relative/fixed.

To może dla .box

[CSS] pobierz, plaintext 
margin-top: -720px;
[CSS] pobierz, plaintext 

http://jsbin.com/onIReyEK/8/edit

[malkavi]

Bardzo ci dziękuję! o to właśnie mi chodziło.

Szkoda że logicznie nie potrafię tego ogarnąć. Jak to jest że ustawiam margin na wartość minusową którego nie ma ?

Polecił byś może jakiś artykuł w którym jest to dobrze wytłumaczone jak działają te minusowe wartości parametrów ?

[Damonsson]

Teraz masz domyślnie, margin-top: 0px. Jak dasz -720px no to będzie miało ujemny margines, a jako, że jest position: absolute/relative/fixed to najdzie na element wyżej. Hmm z kursów to browsehappy czy jakoś tak polecam, fajnie wizualnie wytłumaczone wszystko. Ale czy akurat to, to nie wiem.