Heute sehen wir eine wichtige Eigenschaft von CSS, auch aus der letzten Version geerbt, i CSS3. Ich rede (wie Sie aus dem Titel erraten werden) Immobilien “z-index“.

Die Eigenschaften “Höhe” und “Breite” impostarenno Höhe und Breite, während “z-index” wir brauchen, um Elemente in die dritte Dimension zu bewegen Höhe (der Asse “Die”). Die dritte Dimension senkrecht zu dem Bildschirm, und es wird leichter verständlich für diejenigen, die mit Plänen für die Verwendung von Stufen.

Stellen Sie den Bildschirm als Tisch, auf dem einige Spielkarten legen, dadurch:

In diesem Beispiel jedem “Schreiben” ist “div”, jeder “div” hat eine Eigenschaft “z-index” unterschiedlich. Je kleiner der Wert “z-index”, mehr “fernen” werden die Karten, wenn der Wert größer ist als der vorherige, das div wird übereinander gelegt werden. Die CSS verwendet wird, die folgenden:

 #box1 {
  	Grenze: 1px solid black;
  	Höhe: 100px;
  	Breite: 80px;
	Position: absolute;
	links: 15px;
	top: 15px;
	Hintergrund: red;
	z-index: 1;
}

#box2 {
  	Grenze: 1px solid black;
  	Höhe: 100px;
  	Breite: 80px;
	Position: absolute;
	links: 20px;
	top: 30px;
	Hintergrund: grün;
	z-index: 2;
}

#box3 {
  	Grenze: 1px solid black;
  	Höhe: 100px;
  	Breite: 80px;
	Position: absolute;
	links: 25px;
	top: 45px;
 	Hintergrund: blau;
	z-index: 3;
}

#box4 {
  	Grenze: 1px solid black;
  	Höhe: 100px;
  	Breite: 80px;
	Position: absolute;
	links: 30px;
	top: 60px;
	Hintergrund: gelb;
	z-index: 4;
}

#box5 {
  	Grenze: 1px solid black;
  	Höhe: 100px;
  	Breite: 80px;
	Position: absolute;
	links: 35px;
	top: 75px;
	Hintergrund: magenta;
	z-index: 5;
}

Die folgende, stattdessen wurde der Wert zugewiesen “6” Eigentum “z-index” del box 1:

Erklären Sie den Wert “z-index” nicht nur die Position auf der “Die”, aber Starten Sie eine neue Hierarchie der Elemente. Das Anwesen “z-index” auch, nimmt negative Werte und wenn zwei Elemente haben den gleichen Wert wird angezeigt gemäß der hierarchischen Ordnung Standard (über denen eingefügt nach).

Für diejenigen, die einige Tests mit dem gezeigten Beispiel tun, ist in der veröffentlichten diese Seite.

Zu wenig?

Hinzufügen einer Beschriftung des Fotos pop-up mit CSS3 CSS und die Eigenschaft “umreißen” Einige Schriftarten, oder vielmehr einige Reihe von Icons GTranslate: ein Widget für die automatische Übersetzung Buttons Navigationsmenü mit CSS Sprites