Po przeczytaniu tego artykułu będziesz mógł tworzyć nakładające się div za pomocą CSS. W tym celu najpierw dowiemy się o „ pozycja ' oraz ' indeks z ' nieruchomości.
Zacznijmy!
Właściwość „pozycji” CSS
W HTML możesz ustawić pozycję elementów, korzystając z „ pozycja ' własność. Ostateczna pozycja elementu na stronie internetowej jest określana przez jego prawą, lewą, górną i dolną część oraz w połączeniu z właściwościami z-index.
Składnia
Składnia właściwości position to:
pozycja : wartość
W miejscu ' wartość ”, możesz ustawić różne pozycje elementów, takie jak bezwzględne, względne, stałe i przyklejone.
Właściwość CSS „z-index”
„ indeks z Właściwość ” służy do ustawienia kolejności elementów na stosie. Element mający większą wartość indeksu z jest umieszczany przed pozostałymi.
Składnia
Składnia właściwości z-index jest następująca:
indeks z : automatyczny |liczbaW powyższej składni „ automatyczny ” służy do ustawiania kolejności zgodnie z elementem nadrzędnym, podczas gdy w przypadku sekwencji ręcznej, „ numer ” jest ustawiana jako wartość właściwości z-index.
Przejdźmy teraz do praktycznego przykładu tworzenia nakładających się divów za pomocą CSS.
Przykład 1: nakładanie się drugiej dywizji na pierwszą
W sekcji HTML utworzymy dwa div i przypiszemy różne nazwy klas jako „ div1 ' oraz ' div2 ”.
HTML
< ciało >< div klasa = „dział1” >< / div >
< div klasa = „dział2” >< / div >
< / ciało >
Teraz przejdź do CSS i postępuj zgodnie z podanymi instrukcjami:
- Ustaw wartość właściwości pozycji jako „ absolutny ” dla miejsca div1 dokładnie w miejscu, w którym chcesz.
- Dostosuj wysokość i szerokość div1 jako „ 250px ' oraz ' 300px ”.
- Wartość wskaźnika Z jest ustawiona jako „ 1 ”.
- Ustaw kolor tła div1 jako „ rgb(4, 3, 75) ”.
CSS
.div1 {pozycja : absolutny ;
wzrost : 250px ;
szerokość : 300px ;
indeks z : 1 ;
tło : RGB ( 4 , 3 , 75 ) ;
}
Wyjście
Pierwszy div został pomyślnie umieszczony. Teraz przechodzimy do drugiego div.
Aby nałożyć div2, postępuj zgodnie z podanymi instrukcjami:
- Ustaw wartość właściwości position, szerokości i wysokości elementu div2 tak samo jak „ div1 ”.
- Ustaw wartość indeksu Z jako „ dwa ”, aby umieścić go przed pierwszym div.
- Ustaw inny kolor tła dla div2 jako „ rgb(0, 204, 255) ”.
- Ustaw margines div2 jako „ 50px ” jako wartość marginesu górnego i marginesu lewego.
- Ustaw przezroczystość div2 jako „ 0,7 ”.
CSS
.div2 {pozycja : absolutny ;
szerokość : 300px ;
wzrost : 250px ;
indeks z : 3 ;
tło : RGB ( 0 , 204 , 255 ) ;
margines : 50px ;
nieprzezroczystość : 0,7 ;
}
Wyjście
Div2 z powodzeniem pokrywa się z div1.
Jeśli chcesz ustawić div1 nad div dwa, wystarczy zmienić wartość indeksu z. Zobaczmy na przykład.
Przykład 2: nakładanie się pierwszego div na drugi div
W tym przykładzie zmienimy wartość indeksu z obu divów. W ' .div1 ” klasy pliku CSS, ustaw wartość „ indeks z ” właściwość jako „ dwa ”:
indeks z : dwa ;Następnie w „ .div2 ”, ustaw wartość klasy „ indeks z ” właściwość jako „ 1 ”:
indeks z : 1 ;W rezultacie pierwszy div zostanie umieszczony przed drugim div:
Skompilowaliśmy najłatwiejszą metodę tworzenia dwóch nakładających się divów za pomocą CSS.
Wniosek
„ pozycja ' oraz ' indeks z Właściwość ” służy do tworzenia nakładających się elementów div w CSS. Domyślnie wartość z-index wynosi 1, co oznacza, że nowo utworzony div zostanie umieszczony przed istniejącym div. Można jednak określić dowolną wartość zgodnie z własnymi wymaganiami, aby dostosować kolejność nakładania się. W tym artykule przedstawiliśmy metody tworzenia nakładających się elementów Div z CSS.