Jak tworzyć nakładające się Divy z CSS

W CSS możesz tworzyć nakładające się Divy, wykorzystując „pozycja" I "z-index" nieruchomości. Właściwość pozycji CSS ustawia pozycję DIV lub pojemnika, podczas gdy właściwość indeksu Z można wykorzystać do zdefiniowania sekwencji DIV. W takim scenariuszu Div o większej wartości indeksu Z jest umieszczany przed drugim.

W wyniku przeczytania tego artykułu będziesz mógł tworzyć nakładające się Divy z CSS. W tym celu dowiemy się o „pozycja" I "z-index" nieruchomości.

Zacznijmy!

Właściwość CSS „pozycja”

W HTML możesz ustawić pozycję elementów, wykorzystując „pozycja" nieruchomość. Ostateczna pozycja elementu na stronie internetowej jest określona przez jego prawą, lewą, górną, dolną i w połączeniu z właściwościami indeksu.

Składnia

Składnia właściwości pozycji to:

Pozycja: Wartość

W miejscu "wartość”, Możesz ustawić różne pozycje elementów, takie jak absolut, względny, stały i lepki.

Właściwość CSS „z-index”

„„z-index„Właściwość służy do ustawiania kolejności stosu elementów. Element o większej wartości indeksu Z jest umieszczony przed innymi.

Składnia

Składnia właściwości Z-Index jest następująca:

z-index: numer automatyczny |

W powyższej składni „automatyczny”Służy do ustawiania zamówienia zgodnie z elementem nadrzędnym, podczas gdy w przypadku sekwencji ręcznej„ „numer”Jest ustawiony jako wartość właściwości z-index.

Przejdźmy teraz do praktycznego przykładu tworzenia nakładających się DIV z CSS.

Przykład 1: nakładanie się drugiej div z pierwszym

W sekcji HTML utworzymy dwa Divy i przypisamy różne nazwy klas jako „div1" I "div2".

Html

Teraz przejdź do CSS i postępuj zgodnie z danymi instrukcjami:

• Ustaw wartość właściwości pozycji jako „absolutny„Za miejsce Div1 dokładnie to miejsce, w którym chcesz.
• Dostosuj wysokość i szerokość div1 jako „250px" I "300px".
• Wartość indeksu Z jest ustalana jako „1".
• Ustaw kolor tła Div1 jako „RGB (4, 3, 75)".

CSS

.div1
Pozycja: absolutna;
Wysokość: 250px;
szerokość: 300px;
z-index: 1;
Tło: RGB (4, 3, 75);

Wyjście

Pierwszy DIV jest pomyślnie umieszczony. Teraz przechodzimy do drugiego div.

Aby nakładać się na div2, postępuj zgodnie z podanymi instrukcjami:

• Ustaw wartość właściwości pozycji, szerokości i wysokości div2 tak samo jak „div1".
• Ustaw wartość indeksu Z jako „2”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 i margines.
• Ustaw krycie Div2 jako „0.7".

CSS

.div2
Pozycja: absolutna;
szerokość: 300px;
Wysokość: 250px;
z-index: 3;
Tło: RGB (0, 204, 255);
Margines: 50px;
Krycie: 0.7;

Wyjście

Div2 z powodzeniem pokrywa się z Div1.

Jeśli chcesz ustawić div1 na Div dwa, wystarczy zmienić wartość indeksu Z. Zobaczmy przykład tego.

Przykład 2: nakładanie się pierwszego div z drugim

W tym przykładzie zmienimy wartość indeksu Z obu divs. W ".div1„Klasa pliku CSS, ustaw wartość„z-index„Nieruchomość jako„2”:

z-index: 2;

Potem w „.div2„Klasa, ustaw wartość„z-index„Nieruchomość jako„1”:

z-index: 1;

W rezultacie pierwsza Div zostanie umieszczona przed drugim Div:

Zebraliśmy najłatwiejszą metodę stworzenia dwóch nakładających się div z CSS.

Wniosek

„„pozycja" I "z-index„Własność służy do tworzenia nakładających się divów w CSS. Domyślnie wartość indeksu Z wynosi 1, która stwierdza, że ​​nowo utworzona div zostanie umieszczona przed istniejącym Div. Możesz jednak określić dowolną wartość zgodnie z wymaganiami, aby dostosować nakładającą się sekwencję. W tym artykule zaoferowaliśmy metody tworzenia nakładających się DIV z CSS.