Као резултат читања овог чланка, моћи ћете да креирате дивове који се преклапају помоћу ЦСС-а. У ту сврху, прво ћемо научити о „ положај ' и ' з-индекс ” својства.
Хајде да почнемо!
ЦСС својство „позиције“.
У ХТМЛ-у можете поставити позицију елемената користећи „ положај ' имовина. Коначна позиција елемента на веб страници одређена је његовим десним, левим, горњим, доњим и у комбинацији са својствима з-индекса.
Синтакса
Синтакса својства позиције је:
положај : вредност
На месту „ вредност “, можете поставити различите позиције елемената као што су апсолутни, релативни, фиксни и лепљиви.
Својство ЦСС „з-индекс“.
„ з-индекс ” својство се користи за подешавање редоследа елемената. Елемент који има већу вредност з-индекса ставља се испред осталих.
Синтакса
Синтакса својства з-индекс је следећа:
з-индекс : ауто |бројУ горе наведеној синтакси, „ ауто ” се користи за постављање редоследа према родитељском елементу, док се за ручну секвенцу „ број ” се поставља као вредност својства з-индекса.
Сада, пређимо на практичан пример креирања преклапајућих див-ова са ЦСС-ом.
Пример 1: Преклапање другог Див са првим
У одељку ХТМЛ направићемо два дива и доделити различита имена класа као „ див1 ' и ' див2 ”.
ХТМЛ
< тело >< див класа = 'див1' >< / див >
< див класа = 'див2' >< / див >
< / тело >
Сада пређите на ЦСС и пратите дата упутства:
- Подесите вредност својства позиције као „ апсолутни ” за место див1 тачно место где желите.
- Подесите висину и ширину див1 као „ 250пк ' и ' 300пк ”.
- Вредност з-индекса је постављена као „ 1 ”.
- Поставите боју позадине див1 као „ ргб(4, 3, 75) ”.
ЦСС
.див1 {положај : апсолутни ;
висина : 250пк ;
ширина : 300пк ;
з-индекс : 1 ;
позадини : ргб ( 4 , 3 , 75 ) ;
}
Излаз
Први див је успешно постављен. Сада прелазимо на други див.
Да бисте преклопили див2, пратите дата упутства:
- Подесите вредност својства позиције, ширине и висине див2 исто као и „ див1 ”.
- Подесите вредност з-индекса као „ два ” да бисте га поставили испред првог див.
- Подесите другу боју позадине за див2 као „ ргб(0, 204, 255) ”.
- Поставите маргину див2 као „ 50пк ” као вредност маргин-топ и маргин-лефт.
- Подесите непрозирност див2 као „ 0.7 ”.
ЦСС
.див2 {положај : апсолутни ;
ширина : 300пк ;
висина : 250пк ;
з-индекс : 3 ;
позадини : ргб ( 0 , 204 , 255 ) ;
маргина : 50пк ;
непрозирност : 0.7 ;
}
Излаз
Див2 се успешно преклапа са див1.
Ако желите да поставите див1 на див два, само треба да промените вредност з-индекса. Погледајмо пример овога.
Пример 2: Преклапање првог Див са другим
У овом примеру, променићемо вредност з-индекса оба дива. У „ .див1 ” класе ЦСС датотеке, подесите вредност “ з-индекс “ својство као “ два ”:
з-индекс : два ;Након тога, у „ .див2 ” класе, подесите вредност „ з-индекс “ својство као “ 1 ”:
з-индекс : 1 ;Као резултат тога, први див ће бити постављен испред другог див:
Саставили смо најлакши метод за креирање два дива који се преклапају са ЦСС-ом.
Закључак
„ положај ' и ' з-индекс ” својство се користи за креирање преклапајућих див-ова у ЦСС-у. Подразумевано, вредност з-индекса је 1, што наводи да ће новокреирани див бити постављен испред постојећег див. Међутим, можете одредити било коју вредност у складу са вашим захтевима да бисте прилагодили секвенцу преклапања. У овом чланку смо понудили методе за креирање Див-ова који се преклапају са ЦСС-ом.