Po přečtení tohoto článku budete moci vytvářet překrývající se divy pomocí CSS. Za tímto účelem se nejprve seznámíme s „ pozice ' a ' z-index vlastnosti.
Začněme!
Vlastnost CSS „pozice“.
V HTML můžete nastavit polohu prvků pomocí „ pozice ' vlastnictví. Konečná pozice prvku na webové stránce je určena jeho pravou, levou, horní, dolní a v kombinaci s vlastnostmi z-index.
Syntax
Syntaxe vlastnosti position je:
pozice : hodnota
Na místě „ hodnota “, můžete nastavit různé polohy prvků, jako jsou absolutní, relativní, pevné a lepivé.
Vlastnost CSS „z-index“.
' z-index Vlastnost ” se používá k nastavení pořadí prvků. Prvek s větší hodnotou z-indexu je umístěn před ostatními.
Syntax
Syntaxe vlastnosti z-index je následující:
z-index : auto |čísloVe výše uvedené syntaxi „ auto “ se používá k nastavení pořadí podle nadřazeného prvku, zatímco pro ruční sekvenci je „ číslo ” je nastavena jako hodnota vlastnosti z-index.
Nyní přejdeme k praktickému příkladu vytváření překrývajících se prvků div pomocí CSS.
Příklad 1: Překrývání druhého divu s prvním
V sekci HTML vytvoříme dva divy a přiřadíme různé názvy tříd jako „ div1 ' a ' div2 “.
HTML
< tělo >< div třída = 'div1' < / div >
< div třída = 'div2' < / div >
< / tělo >
Nyní přejděte do CSS a postupujte podle uvedených pokynů:
- Nastavte hodnotu vlastnosti position jako „ absolutní ” pro místo div1 přesně to místo, kde chcete.
- Upravte výšku a šířku div1 jako „ 250 pixelů ' a ' 300 pixelů “.
- Hodnota z-indexu je nastavena jako „ 1 “.
- Nastavte barvu pozadí div1 jako „ rgb(4, 3, 75) “.
CSS
.div1 {pozice : absolutní ;
výška : 250 pixelů ;
šířka : 300 pixelů ;
z-index : 1 ;
Pozadí : rgb ( 4 , 3 , 75 ) ;
}
Výstup
První div je úspěšně umístěn. Nyní se přesuneme do druhého div.
Chcete-li překrýt div2, postupujte podle uvedených pokynů:
- Nastavte hodnotu vlastnosti position, šířku a výšku div2 stejně jako „ div1 “.
- Nastavte hodnotu z-indexu jako „ dva ” pro umístění před první div.
- Nastavte jinou barvu pozadí pro div2 jako „ rgb(0, 204, 255) “.
- Nastavte okraj div2 jako „ 50 pixelů ” jako hodnotu margin-top a margin-left.
- Nastavte neprůhlednost div2 jako „ 0,7 “.
CSS
.div2 {pozice : absolutní ;
šířka : 300 pixelů ;
výška : 250 pixelů ;
z-index : 3 ;
Pozadí : rgb ( 0 , 204 , 255 ) ;
okraj : 50 pixelů ;
neprůhlednost : 0,7 ;
}
Výstup
Div2 se úspěšně překrývá s div1.
Pokud chcete nastavit div1 nad div dva, stačí změnit hodnotu z-indexu. Podívejme se na příklad.
Příklad 2: Překrývání prvního divu s druhým
V tomto příkladu změníme hodnotu z-indexu obou div. V ' .div1 ” třídy souboru CSS, nastavte hodnotu “ z-index 'vlastnost jako' dva “:
z-index : dva ;Poté v „ .div2 ” class, nastavte hodnotu “ z-index 'vlastnost jako' 1 “:
z-index : 1 ;V důsledku toho bude první div umístěn před druhou div:
Sestavili jsme nejjednodušší metodu pro vytvoření dvou překrývajících se divů pomocí CSS.
Závěr
' pozice ' a ' z-index Vlastnost ” se používá k vytvoření překrývajících se prvků div v CSS. Ve výchozím nastavení je hodnota z-indexu 1, což znamená, že nově vytvořený div bude umístěn před existující div. Můžete však zadat libovolnou hodnotu podle svých požadavků a upravit tak překrývající se sekvenci. V tomto článku jsme nabídli metody pro vytváření překrývajících se prvků Div s CSS.