ugrás a tartalomhoz

Miért nem működik a z-index?

seovili · 2011. Jan. 22. (Szo), 11.00
Sziasztok!

Tudna valaki segíteni nekem? A virágot nem sikerül sehogysem legfelülre hozni. Hogy rálógjon a fehér tartalmi részre, a szövegre, stb...

http://www.fantaziaviragbolt.tk/

Ez egy drupal smink, amiben régiót hoztam létre, meg csináltam egy .overimage class-t is a képhez, de hiába adok bármelyiknek z-index-et, nincs hatása. Miért?
‹ Nekem is menü problémám lenne Van-e erre css formázás? ›
 ■
1

Megnéztem és nem látom, hogy

ironwill · 2011. Jan. 22. (Szo), 11.50
Megnéztem és nem látom, hogy z-index be lenne állítva.. mert eldobta a böngésző..
Z-index-nek számot adhatsz értékül, nem konstansokat.. (lásd miért nem működik a top)
pl. állítsd 100-ra.

(még egy fontos dolog: csak(!!) absolute pozícionáláskor érvényesül a z-index)

Érdemes ilyenkor segítségül hívni a Firefox Firebug kiterjesztését, de az alap hibakozol is megfelelő arra, pl. hogy lássuk, ha gond van a css tulajdonságokkal.
2

A css-ben bent van a z-index.

seovili · 2011. Jan. 22. (Szo), 12.42
A css-ben bent van a z-index. A régiónak is, meg a class-nak is van, de a firebug nem mutatja, mintha nem is lenne! 100-ra rakom akkor sem megy, pedig minden más elem, aminek van z-index-e, az -1 és 1 között mozog. Viszont ezek között van sok, ami relative van pozicionálva!

Nem tudom miért van ez...
4

#nyelv-css-id { position:

LeGaS · 2011. Jan. 22. (Szo), 12.46

#nyelv-css-id {
    position: absolute;
    padding: 0 30px 30px 400px;
    top: 50px
    }

.overimage
{
    position: absolute;
    padding: 0 5px 5px 5px;
    top: 5px
	z-index: 5
}
Néhány sor végéről hiányzik a pontosvessző, ezeket írd oda és úgy látni fogja a Firebug is.
6

z-index:0

Totti 1986 · 2011. Jan. 22. (Szo), 12.50
nekem nagyon zavaros az egész felépítés, de szedd ki az art-block stilusból a z-index:0-t:
.art-block {
    margin: 0 auto;
    min-height: 1px;
    min-width: 1px;
    position: relative;
    /*z-index: 0;*/
}
nálam működik
3

Bármilyen pozicionálással

LeGaS · 2011. Jan. 22. (Szo), 12.43
Bármilyen pozicionálással működik, csak static-al nem.
absolute, relative és fixed esetén működik a z-index.
5

Vagy "relative"

Endyl · 2011. Jan. 22. (Szo), 12.48
Nem csak abszolút pozícionálásnál, hanem egyáltalán pozicionálásnál, amibe beletartozik a relatív is, vagy a fix.

Plusz érdemes utánaolvasni, hogy pontosan hogyan is működik a z-index. Különös tekintettel a "stacking context"-re.

Röviden, a gyerek elemek a legközelebbi pozícionált elemmel kerülnek egy "rétegre". Egy alacsonyabb "z-index"-szel rendelkező réteg gyerek elemei sosem fognak egy, a rétegükkel testvér másik, magasabb "z-index"-ű réteg fölé kerülni. Lehet akármekkora a z-index értékük.

Egy mondatban: a z-index relatív a legközelebbi, pozícionált szülő elemhez képest (ha nincs olyan, akkor a html tag).

Ezen kívül van egy belső halmozási sorrend, ami például "z-index: auto;"-nál (vagy azonos z-index értékeknél) jön elő. Azaz a dokumentumban később szereplő elemek magasabban lesznek, mint a korábbiak.
7

Nagyon köszönöm a sok

seovili · 2011. Jan. 22. (Szo), 13.14
Nagyon köszönöm a sok segítséget!

A .art-block z-index eltávolítása után tényleg rendben van. Legalábbis elsőre semmi probléma vele!
8

korrekció

ironwill · 2011. Jan. 22. (Szo), 15.42
Bocsánat, igen, természetesen nem csak abszolút pozícionálással működik, hanem a fixed-el is.. relatívnál nem figyeltem..