Keskustelu: Nettisivujen teko: Elementtien asettelu

Valikkorakenne menee toisen elementin alapuolle. Millä määritteellä saan sen toisen elementin päälle.

Kuva ongelmasta

Laita sille muulle elementille

z-index: -999;

ja valikkorakenteen elementille

z-index: 999;

. Näin se valikkorakenne menee kaiken muun päälle.

Sillä on väliä, mille elementille tuon määrittelee. z-index kun ei ihan yksinään vaikuta asioihin.

Oletetaan että sivulla on vaikka seuraavanlainen rakenne:

<div id="sivusto">
    <h1 id="otsikko">Meidän sivut</h1>
    <div id="valikko">
        <ul>
            ...
        </ul>
    </div>
</div>
<div id="sisalto">
    <textarea>MINÄ OLEN VALIKON EDESSÄ</textarea>
</div>

Tässä kohtaa seuraavat asiat saavat valikon aina textarea:n eteen:
1) #sivusto:lle position: relative; (tai jokin muu kuin static)
2) #sivusto:lle z-index: 1; ja #sisalto:lle z-index: 0; (tarpeellinen vain jos #sisalto on jokin muu kuin static)

static-elementtien z-index -arvoa ei huomioida. Tämän takia tuollakin sivulla osa elementeistä tulee päälle kun taas osa niistä ei tule.

"Muulle" elementille ei kannata laittaa z-index -999;, koska se saattaa kadota kaiken taakse eli kokonaan pois näkyvistä.

Sillä on paljon väliä, mille elementille rakenteessa määrittää noita asioita. Suoraan lapsielementteihin z-indexiä asettamalla ei välttämättä tapahdu mitään muutoksia.

Viestissäni hieman yksinkertaistin asiaa, mutta periaatteessahan se noin menee. Anteeksi kuitenkin yksinkertaistus. Merri antoi hyvän katsauksen asiaan.

Kiitoksia!

Tämä olikin minulta jo melkein unohtunut muiden projektien alle, mutta kiitos. Alanpa testailemaan tätä mahd. pian. Kiitos kovasti.