Toon posts:

[css] browser negeert stack level (z-index)

Pagina: 1
Acties:

woensdag 6 april 2005 12:48

Acties:

Verwijderd

Topicstarter
Ik heb op de body een achtergrondafbeelding toegepast:
body { background: rgb(0,0,0) url("background.png"); }

Dan moet er, aan de bovenkant van de pagina, gecentreerd in het midden, een logo komen (deels transparant, zodat de achtergrond er doorheen te zien is). Ik gebruik hiervoor een apart element (div), direct na de openingstag van de body, en wel op de volgende wijze:

<div style="margin: 0; padding: 475px 0 0 0; position: absolute; left; 0; top: 0; width: 100%; background: url('logo.gif') no-repeat; background-position: top center;"> <br /></div>
(padding-top van 475px overigens i.v.m. de hoogte van de afbeelding)

Ik heb het overigens ook geprobeerd met:
<div style="margin: 0; padding: 0; position: absolute; left; 0; top: 0; width: 100%; text-align: center;">[img]"logo.gif"[/img]</div>

Daarboven moet dan vervolgens weer de content komen. Dit alles staat netjes in een container, relatief gepositioneerd.

Om te voorkomen dat content en het logo met elkaar overhoop komen te liggen, ken ik aan de container (en een aantal elementen daarin) een z-index toe, voor de container is dat een z-index van 1.

Het logo (nou ja, de div waar deze in staat), zou standaard een z-index van 0 moeten hebben, en dus achter de container moeten verschijnen, nietwaar?

En dat doet het dus niet. Het logo verschijnt doodleuk bovenop de content, zelfs als ik er een z-index van 0 aan toeken. |:(
Waarom nou? :? Doe ik iets fout?

De browser is overigens Firefox 1.0.2.

woensdag 6 april 2005 12:55

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 15:40

Zoefff

❤ 

Ik heb het nooit zo op die z-index. Heb het ook wel eens geprobeerd, maar het werkt nooit zoals ik zou verwachten dat het moet werken, dus los ik het eigenlijk altijd anders op.

Volgens mij moet je die layers niet "stapelen", maar moet je het anders oplossen. Neem de body met een background-image, en dan je container met een background-image. Vervolgens moet je de content niet boven (z) de container, maar ín de container stoppen.

Dus
<body>
    <div id='container'>
        <div id='content'>
        </div>
    </div>
</body>


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 6 april 2005 13:07

Acties:

Verwijderd

Topicstarter
Daar had ik niet aan gedacht, mede omdat de container (met content) slechts 277px breed is, en het logo 746px. Ik heb nu de container (+content) in een 2e container gezet, en deze het logo als achtergrondafbeelding meegegeven, en dat werkt uitstekend.

en toch blijf ik het vreemd vinden dat een stack level gewoon genegeerd wordt. :/

woensdag 6 april 2005 13:07

Acties:

Verwijderd

z-index werkt volgens mij alleen op elementen die ofwel absoluut ofwel relatief gepositioneerd zijn. Dus ik weet niet hoe het zit met je content, maar als die "niets" is dan wordt de z-index lekker genegeerd, tenminste dat is bij mij zo...

woensdag 6 april 2005 13:19

Acties:

Verwijderd

Topicstarter
|:(
The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!
ehm.. ja.
Dat is de content, of zelfs de container dus niet.
Reageer