Div in den Hintergrund ohne "position"

[Brini]

Hallo hallo,

soweit ich informiert bin, kann man den z-index ja nur in Kombination mit "position" verwenden. Jetzt habe ich 2 Elemente, von denen eines die Navigation ist - die will ich aber mit nicht mit position platzieren, da sie dann nicht mehr so flexibel ist. Gibt es also noch eine andere Möglichkeit, die "Ebenenreihenfolge" zu verändern?

Vielen Dank im Voraus und liebste Grüße,
die Brini

[misterunknown]

Moin,

soweit ich informiert bin, kann man den z-index ja nur in Kombination mit "position" verwenden. Jetzt habe ich 2 Elemente, von denen eines die Navigation ist - die will ich aber mit nicht mit position platzieren, da sie dann nicht mehr so flexibel ist. Gibt es also noch eine andere Möglichkeit, die "Ebenenreihenfolge" zu verändern?

Es müssen nicht beide Elemente mit position angeordnet sein, damit z-index wirkt.

Beispiel

Grüße Marco

[Brini]

Wirklich? Bei mir funktioniert das irgendwie noch nicht. Hier mal mein Code:

CSS:

.gradient_start {
position:absolute; top: 0px; right:0px; left: 0px;
height: 420px;
z-index: 1;
}

#navigation{
width: 100%;
z-index: 2;

}

HTML:

<div id= "navigation">

	<div id="navi\_left">  
		<p> Edalco </p>  
	</div>  
		  
				  
	<div id="navi\_right">		  
		<p> Kanon</p>  
	</div>  
		  
		  
	<div id="JK">  
		<img src="images/logo\_jk\_web.png" alt="Logo\_JK" title="JK" />  
	</div>  

</div><!--Ende #navigation-->

<div class="gradient_start">

</div>

[misterunknown]

Moin,

.gradient_start {
position:absolute; top: 0px; right:0px; left: 0px;
height: 420px;
z-index: 1;
}

Der z-index Wert bei den Elementen, die nicht positioniert sind ist sinnlos. Aber du hast hier die Möglichkeit, nicht nur im positiven Bereich zu arbeiten, sondern auch im nagativen.

Setze als Wert von z-index einfach mal -1 oder -10.

Grüße Marco

[Brini]

Ach wie cool – funktioniert einwandfrei – das ging ja schnell!

Danke dir vielmals!!

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Aber du hast hier die Möglichkeit, nicht nur im positiven Bereich zu arbeiten, sondern auch im nagativen.

Aber Vorsicht! Wenn in dem betreffenden Element Links oder Eingabefelder andere interaktive Elemente sind, führt ein negativer z-Index dazu, dass diese nicht mehr erreichbar sind.

Negative z-Indizes sind im Speziellen brauchbar, im Allgemeinen keine gute Idee.

Qapla'

[misterunknown]

Moin,

Aber Vorsicht! Wenn in dem betreffenden Element Links oder Eingabefelder andere interaktive Elemente sind, führt ein negativer z-Index dazu, dass diese nicht mehr erreichbar sind.

In dem Falle könnte er ja durchaus darüber nachdenken, seine Navigation doch mit position anzuordnen. Ich verstehe auch nicht, warum das unflexibler sein sollte.

Grüße Marco

[Gunnar Bittersmann]

@@Brini:

nuqneH

soweit ich informiert bin, kann man den z-index ja nur in Kombination mit "position" verwenden.

Ja, 'z-index' wirkt nur auf positionierte Elemente. [CSS2 §9.9.1]

Was das bedeutet, steht in [CSS2 §9.3.2]: „Ein Element ist positioniert, wenn seine 'position'-Eigenschaft einen anderen Wert als 'static' hat.“

die will ich aber mit nicht mit position platzieren

Es besteht kein Grund, Elemente absolut zu positionieren, damit 'z-index' wirkt. 'relative' ist auch an anderer Wert als 'static' – womöglich in deinem Fall der passende.

Qapla'