В резултат на четенето на тази статия ще можете да създавате припокриващи се div с CSS. За тази цел първо ще научим за „ позиция ' и ' z-индекс ' Имоти.
Да започваме!
Свойство CSS “position”.
В HTML можете да зададете позицията на елементите, като използвате „ позиция ' Имот. Крайната позиция на елемент на уеб страница се определя от дясно, ляво, горе, долу и в комбинация със свойствата на z-индекс.
Синтаксис
Синтаксисът на свойството позиция е:
позиция : стойност
На мястото на „ стойност ”, можете да зададете различни позиции на елементи като абсолютна, относителна, фиксирана и лепкава.
Свойство „z-index“ на CSS
„ z-индекс ” Свойството се използва за задаване на реда на стека на елементите. Елементът с по-голяма стойност на z-индекс се поставя пред останалите.
Синтаксис
Синтаксисът на свойството z-index е както следва:
z-индекс : Автоматичен |номерВ дадения по-горе синтаксис „ Автоматичен ” се използва за задаване на ред според родителския елемент, докато за ръчна последователност, „ номер ” се задава като стойност на свойството z-index.
Сега нека преминем към практическия пример за създаване на припокриващи се div с CSS.
Пример 1: Припокриване на втори Div с първи
В раздела HTML ще създадем два div и ще присвоим различни имена на класове като „ div1 ' и ' div2 ”.
HTML
< тяло >< див клас = 'div1' >< / див >
< див клас = 'div2' >< / див >
< / тяло >
Сега преминете към CSS и следвайте дадените инструкции:
- Задайте стойността на свойството позиция като „ абсолютен ” за място div1 точно на мястото, където искате.
- Регулирайте височината и ширината на div1 като „ 250 пиксела ' и ' 300 пиксела ”.
- Стойността на z-индекса е зададена като „ 1 ”.
- Задайте цвета на фона на div1 като „ rgb(4, 3, 75) ”.
CSS
.div1 {позиция : абсолютен ;
височина : 250 пиксела ;
ширина : 300 пиксела ;
z-индекс : 1 ;
заден план : rgb ( 4 , 3 , 75 ) ;
}
Изход
Първият div е поставен успешно. Сега преминаваме към второто div.
За да припокриете div2, следвайте дадените инструкции:
- Задайте стойността на свойството позиция, ширината и височината на div2 същите като „ div1 ”.
- Задайте стойността на z-индекса като „ две ”, за да го поставите пред първия div.
- Задайте различен фонов цвят за div2 като „ rgb(0, 204, 255) ”.
- Задайте границата на div2 като „ 50px ” като стойността на полето отгоре и отляво.
- Задайте непрозрачността на div2 като „ 0,7 ”.
CSS
.div2 {позиция : абсолютен ;
ширина : 300 пиксела ;
височина : 250 пиксела ;
z-индекс : 3 ;
заден план : rgb ( 0 , 204 , 255 ) ;
марж : 50px ;
непрозрачност : 0,7 ;
}
Изход
Div2 успешно се припокрива с div1.
Ако искате да зададете div1 върху div two, просто трябва да промените стойността на z-index. Нека да видим пример за това.
Пример 2: Припокриване на първо Div с второ
В този пример ще променим стойността на z-индекса на двата div. в „ .div1 ” на CSS файла, задайте стойността на „ z-индекс „имот като“ две ”:
z-индекс : две ;След това в „ .div2 ”, задайте стойността на „ z-индекс „имот като“ 1 ”:
z-индекс : 1 ;В резултат на това първото div ще бъде поставено пред второто div:
Компилирахме най-лесния метод за създаване на два припокриващи се div с CSS.
Заключение
„ позиция ' и ' z-индекс ” се използва за създаване на припокриващи се div в CSS. По подразбиране стойността на z-индекса е 1, което посочва, че новосъздаденият div ще бъде поставен пред съществуващия div. Можете обаче да посочите произволна стойност според вашите изисквания, за да коригирате припокриващата се последователност. В тази статия сме предложили методите за създаване на припокриващи се Div с CSS.