В результате прочтения этой статьи вы сможете создавать перекрывающиеся элементы div с помощью CSS. Для этого, во-первых, мы узнаем о « должность ' а также ' z-индекс ' характеристики.
Давайте начнем!
CSS-свойство «позиция»
В HTML вы можете установить положение элементов, используя « должность ' имущество. Конечная позиция элемента на веб-странице определяется его правым, левым, верхним, нижним и в сочетании со свойствами z-index.
Синтаксис
Синтаксис свойства position:
должность : ценность
В месте ' ценность », вы можете установить различные положения элементов, такие как абсолютное, относительное, фиксированное и липкое.
Свойство CSS «z-index»
“ z-индекс ” используется для установки порядка элементов в стеке. Элемент, имеющий большее значение z-индекса, размещается перед остальными.
Синтаксис
Синтаксис свойства z-index следующий:
z-индекс : авто |числоВ приведенном выше синтаксисе « авто ' используется для установки порядка в соответствии с родительским элементом, а для ручной последовательности ' количество ” устанавливается как значение свойства z-index.
Теперь давайте перейдем к практическому примеру создания перекрывающихся элементов div с помощью CSS.
Пример 1: Перекрытие второго элемента Div с первым.
В разделе HTML мы создадим два div и назначим разные имена классов как « div1 ' а также ' раздел 2 ».
HTML
< тело >< див учебный класс знак равно 'дел1' >< / див >
< див учебный класс знак равно 'дел2' >< / див >
< / тело >
Теперь перейдите к CSS и следуйте приведенным инструкциям:
- Установите значение свойства position как « абсолютный ” для div1 поместите именно то место, где вы хотите.
- Отрегулируйте высоту и ширину div1 как « 250 пикселей ' а также ' 300 пикселей ».
- Значение z-индекса установлено как « 1 ».
- Установите цвет фона div1 как « RGB(4, 3, 75) ».
CSS
.div1 {должность : абсолютный ;
высота : 250 пикселей ;
ширина : 300 пикселей ;
z-индекс : 1 ;
фон : RGB ( 4 , 3 , 75 ) ;
}
Выход
Первый div успешно размещен. Теперь переходим ко второму div.
Чтобы перекрыть div2, следуйте приведенным инструкциям:
- Установите значение свойства position, ширину и высоту div2 так же, как « div1 ».
- Установите значение z-индекса как « два », чтобы поместить его перед первым div.
- Установите другой цвет фона для div2 как « RGB(0, 204, 255) ».
- Установите поле div2 как « 50 пикселей » в качестве значений поля сверху и слева.
- Установите непрозрачность div2 как « 0,7 ».
CSS
.div2 {должность : абсолютный ;
ширина : 300 пикселей ;
высота : 250 пикселей ;
z-индекс : 3 ;
фон : RGB ( 0 , 204 , 255 ) ;
поле : 50 пикселей ;
непрозрачность : 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-index равно 1, что означает, что вновь созданный div будет помещен перед существующим div. Однако вы можете указать любое значение в соответствии с вашими требованиями, чтобы настроить последовательность перекрытия. В этой статье мы предложили методы создания перекрывающихся элементов Div с помощью CSS.