Как складывать элементы в CSS?
Чтобы создать привлекательные и уникальные веб-страницы, в конечном итоге необходимо добавить один элемент поверх другого, полностью или только его часть. Достичь этого можно двумя способами.
- Использование свойства CSS position.
- Использование CSS-сеток.
Использование свойства CSS position: The position: absolute;
Свойство используется для позиционирования любого элемента в абсолютной позиции, и это свойство может использоваться для наложения элементов друг на друга. Используя это, любой элемент может быть расположен где угодно, независимо от положения других элементов.
Пример 1:
<!DOCTYPE html> < html > < head > < style > body { font-family: "Times New Roman", sans-serif; background: green; color: black; text-align: center; } h2 { font-weight: bold; padding: 0 10px; margin-bottom: 10px; } .parentClass { background: cyan; width: 80vw; margin: 8vw 10vw; height: 210px; } .firstchild { top: 0; left: 0; } .secondchild { top: 0; right: 0; } .childClass { position: absolute; opacity: 0.6; height: 150px; background: yellow; width: 200px; } </ style > </ head > < body > < div class = "parentClass" > < h2 >I am Parent</ h2 > < div class = "childClass firstchild" > < h2 >First Child </ h2 > </ div > < div class = "childClass secondchild" > < h2 >Second Child </ h2 > </ div > </ div > </ body > </ html > |
Выход:
Чтобы создать автономный компонент, который можно использовать в нескольких местах, вам нужен контейнер внутри другого контейнера, чтобы родительский контейнер изменялся относительно дочернего, вы можете использовать position: relative;
для родительского элемента и position: absolute;
на дочерних элементах.
Пример 2:
<!DOCTYPE html> < html > < head > < style > body { font-family: "Times New Roman", sans-serif; background: green; color: black; text-align: center; } h2 { font-weight: bold; padding: 0 20px; margin-bottom: 15px; } p { padding: 15px 10px; } .parentClass { position: relative; background: cyan; width: 80vw; margin: 8vw 10vw; height: 200px; } .childClass { top: 0; left: 0; opacity: 0.7; width: 200px; height: 150px; background: yellow; position: absolute; } </ style > </ head > < body > < div class = "parentClass" > < h2 >Element 1</ h2 > < div class = "childClass" > < h2 >Element 2</ h2 > < p >position: absolute;</ p >< br > </ div > </ div > </ body > </ html > |
Выход:
Пример 3: Та же реализация может также использоваться для размещения двух элементов поверх родительского элемента.
<!DOCTYPE html> < html > < head > < style > body { font-family: "Times New Roman", sans-serif; background: green; color: black; text-align: center; } h2 { font-weight: bold; padding: 10 20px; margin-bottom: 15px; } p { padding: 10px 10px; } .parentClass { position: relative; background: cyan; width: 80vw; margin: 8vw 10vw; height: 200px; } .childClass { opacity: 0.8; height: 150px; width: 190px; background: yellow; position: absolute; top: 0; } .child1 { left: 0; } .child2 { left: 155px; } </ style > </ head > < body > < div class = "parentClass" > < h2 >Element 1</ h2 > < code >position: relative;</ code > < div class = "childClass child1" > < h2 >Element 1.1</ h2 > < p >position: absolute;</ p >< br > </ div > < div class = "childClass child2" > < h2 >Element 1.2</ h2 > < p >position: absolute;</ p > </ div > </ div > </ body > </ html > |
Выход:
Использование CSS-сеток. Другой способ наложения элементов - использование CSS-сеток. Сетки можно использовать для размещения элементов везде, где это необходимо. Используйте приведенный ниже код, чтобы выполнить простое наложение одного элемента поверх другого.
.parentClass { grid-template-rows: 150px 1 fr; grid-template-columns: 250px 1 fr; display : grid; } .childClass { grid-area: 1 / 1 / 2 / 2 ; } |
Полный код:
<!DOCTYPE html> < html > < head > < style > body { font-family: "Times New Roman", sans-serif; background: green; color: black; text-align: center; } h1 { color: black; font-weight: bold; } h2 { color: grey; font-weight: bold; padding: 25px 15px 20px; margin-bottom: 15px; } p { padding: 5px 10px; } .parentClass { position: relative; background: cyan; width: 80vw; margin: 8vw 10vw; height: 200px; } .childClass { opacity: 0.8; height: 150px; width: 190px; background: yellow; position: absolute; top: 0; } .child1 { left: 0; } .child2 { left: 155px; } .parentClass { display: grid; grid-template-rows: 150px 1fr; grid-template-columns: 250px 1fr; } .childClass { grid-area: 1 / 1 / 2 / 2; } </ style > </ head > < body > < div class = "parentClass" > < h1 >Element 1</ h1 > < div class = "childClass child1" > < h2 >Element 1.1</ h2 > < p >position: absolute;</ p >< br > </ div > < div class = "childClass child2" > < h2 >Element 1.2</ h2 > < p >position: absolute;</ p > </ div > </ div > </ body > </ html > |
Выход:
Если один дочерний элемент необходимо уложить поверх другого и оба поверх родительского элемента.
.parentClass { display : grid; grid-template-columns: 250px 1 fr; grid-template-rows: 150px 1 fr; } .childClass { grid-area: 1 / 1 / 2 / 2 ; } .child -2 { margin-left : 200px ; } |
Пример полного кода:
<!DOCTYPE html> < html > < head > < style > body { font-family: "Times New Roman", sans-serif; background: green; color: black; text-align: center; } h2 { font-weight: bold; padding: 10 10px; margin-bottom: 5px; } .parentClass { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr; background: cyan; width: 80vw; margin: 8vw 10vw; height: 200px; } .childClass { grid-area: 1/1/2/2; opacity: 0.7; height: 150px; width: 250px; background: yellow; } .child2 { margin-left: 200px; } </ style > </ head > < body > < div class = "parentClass" > < h2 >Element 1< br > </ h2 > < div class = "childClass" > < h2 >Element 2.1</ h2 > </ div > < div class = "childClass child2" > < h2 >Element 2.2</ h2 > </ div > </ div > </ body > </ html > |
Выход: