TheJoe.it Into the (öffnen) Quelle

4Mai_Mai_abbreviation/130

CSS: Immobilien “z-index”

Asse

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;
	Spitze: 15px;
	Hintergrund: red;
	z-index: 1;
}

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

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

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

#box5 {
  	Grenze: 1px solid black;
  	Höhe: 100px;
  	Breite: 80px;
	Position: absolute;
	links: 35px;
	Spitze: 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 wollen, ist in der veröffentlichten diese Seite.

hat dir dieser Artikel gefallen?

Dann abonniere doch diesen Blog per RSS Feed!

Über

Ich halte diesen Blog als ein Hobby von 2009. Ich bin begeistert von Grafik, Technologie, Open Source Software. Unter meinen Artikel wird nicht schwierig sein, über die Musik finden, und einige persönliche Reflexionen, aber ich bevorzuge die direkte Linie des Blogs vor allem auf Technologie. Weitere Informationen Kontaktieren Sie mich.