Po prečítaní tohto článku budete môcť pomocou CSS vytvárať prekrývajúce sa prvky div. Za týmto účelom sa najprv dozvieme o „ pozíciu “ a „ z-index vlastnosti.
Začnime!
Vlastnosť CSS „pozícia“.
V HTML môžete nastaviť polohu prvkov pomocou „ pozíciu ' nehnuteľnosť. Konečná pozícia prvku na webovej stránke je určená jeho pravou, ľavou, hornou a spodnou časťou a v kombinácii s vlastnosťami z-indexu.
Syntax
Syntax vlastnosti position je:
pozíciu : hodnotu
Na mieste „ hodnotu “, môžete nastaviť rôzne polohy prvkov, ako sú absolútne, relatívne, pevné a lepivé.
Vlastnosť „z-index“ CSS
' z-index Vlastnosť ” sa používa na nastavenie poradia zásobníkov prvkov. Prvok s väčšou hodnotou z-indexu je umiestnený pred ostatnými.
Syntax
Syntax vlastnosti z-index je nasledovná:
z-index : auto |čísloVo vyššie uvedenej syntaxi „ auto “ sa používa na nastavenie poradia podľa nadradeného prvku, zatiaľ čo pri manuálnom poradí sa „ číslo ” je nastavená ako hodnota vlastnosti z-index.
Teraz prejdime k praktickému príkladu vytvárania prekrývajúcich sa prvkov div pomocou CSS.
Príklad 1: Prekrývanie druhého prvku div s prvým
V sekcii HTML vytvoríme dva div a priradíme rôzne názvy tried ako „ div1 “ a „ div2 “.
HTML
< telo >< div trieda = 'div1' < / div >
< div trieda = 'div2' < / div >
< / telo >
Teraz prejdite na CSS a postupujte podľa uvedených pokynov:
- Nastavte hodnotu vlastnosti position ako „ absolútne ” pre miesto div1 presne to miesto, kde chcete.
- Upravte výšku a šírku div1 ako „ 250 pixelov “ a „ 300 pixelov “.
- Hodnota z-indexu je nastavená ako „ 1 “.
- Nastavte farbu pozadia div1 ako „ rgb(4, 3, 75) “.
CSS
.div1 {pozíciu : absolútne ;
výška : 250 pixelov ;
šírka : 300 pixelov ;
z-index : 1 ;
pozadie : rgb ( 4 , 3 , 75 ) ;
}
Výkon
Prvý div je úspešne umiestnený. Teraz prejdeme k druhej časti.
Ak chcete prekryť div2, postupujte podľa uvedených pokynov:
- Nastavte hodnotu vlastnosti position, šírku a výšku prvku div2 rovnako ako „ div1 “.
- Nastavte hodnotu z-indexu ako „ dva ” umiestnite ho pred prvý div.
- Nastavte inú farbu pozadia pre div2 ako „ rgb(0, 204, 255) “.
- Nastavte okraj div2 ako „ 50 pixelov ” ako hodnotu margin-top a margin-left.
- Nastavte nepriehľadnosť div2 ako „ 0,7 “.
CSS
.div2 {pozíciu : absolútne ;
šírka : 300 pixelov ;
výška : 250 pixelov ;
z-index : 3 ;
pozadie : rgb ( 0 , 204 , 255 ) ;
marža : 50 pixelov ;
nepriehľadnosť : 0,7 ;
}
Výkon
Div2 sa úspešne prekrýva s div1.
Ak chcete nastaviť div1 nad div dva, stačí zmeniť hodnotu z-indexu. Pozrime sa na príklad.
Príklad 2: Prekrývanie prvého prvku div s druhým
V tomto príklade zmeníme hodnotu z-indexu oboch div. V ' .div1 ” triedy súboru CSS, nastavte hodnotu “ z-index “vlastnosť ako “ dva “:
z-index : dva ;Potom v „ .div2 ” triedy, nastavte hodnotu “ z-index “vlastnosť ako “ 1 “:
z-index : 1 ;V dôsledku toho sa prvý div umiestni pred druhý div:
Zostavili sme najjednoduchšiu metódu na vytvorenie dvoch prekrývajúcich sa prvkov div pomocou CSS.
Záver
' pozíciu “ a „ z-index Vlastnosť ” sa používa na vytváranie prekrývajúcich sa prvkov div v CSS. Štandardne je hodnota z-indexu 1, čo znamená, že novovytvorený div sa umiestni pred existujúci div. Môžete však zadať ľubovoľnú hodnotu podľa svojich požiadaviek, aby ste upravili postupnosť prekrývania. V tomto článku sme ponúkli metódy na vytváranie prekrývajúcich sa prvkov Div s CSS.