Как складывать элементы в CSS?

Опубликовано: 5 Января, 2022

Чтобы создать привлекательные и уникальные веб-страницы, в конечном итоге необходимо добавить один элемент поверх другого, полностью или только его часть. Достичь этого можно двумя способами.

  • Использование свойства 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 >

Выход: