2016-04-13 30 views
0

Dört köşede dört span öğeyi kullanarak çizilmiş bir kılavuz var. Plunker kodu here.Kılavuz çizgileri, birbirinin yerine geçecek şekilde üst üste biniyor

enter image description here

Şimdi, dikey çubuklar yatay çubukların üstüne çizilmiş olması gibi. Siyah ve yeşil çubuğun üstünde sarı çubuk çizilmeli, kesişen bölgeler sarı renkte olmalı. Benzer şekilde kahverengi çubuk yeşil çubuğun üzerinde olmalıdır.

Bunu nasıl sağlayabilirim?

+0

Sadece set farklı 'z index' veya [sipariş] (https://plnkr.co/edit/O4IVYMsUhKXiX4wSIZJ3?p= html'deki öğeleri önizleme. – Stickers

+0

onları üst çizgiye taşımıyor! –

+0

Soruyu daha açık hale getirebilirseniz, eminim ki birisi yardım edecektir. – Stickers

cevap

1

Basitçe hile yapmak gerekir Kodunuzdaki için

.left, .right{ 
    z-index:1; 
} 

ekleyerek

+0

siyah alt çizginin üstündeki dikey çizgileri hareket ettirir .. ama yine de üstteki yeşil çizginin altındalar –

+0

Sorunuzda bunu okumadım - sorun şu ki: diğer öğeler üzerinde mutlak ayarlanmış, ama değil 'üst sınıf. Bu pozisyonu ayarlama: mutlak da bunu çözecek – JaanRaadik

İlgili konular